3

i made a fiddle with buttons. Now in the javascript, I'm trying to learn jquery and by doing so I'm converting old fiddles into jquery from javascript however I know how.

My problem is that in my function called init, I can't figure out how to convert the javascript way of get an html element with an id stored in a variable.

Old code in javascript:

var but = document.getElementById("but");

New code in jQuery:

var but = $('#but');

I think the problem is that I start with a javascript statement but then use jQuery. I don't know what to do in terms of variables in jQuery.

Improve this question
5
  • why did i get downvoted, what can i do in the future to avoid it? Commented Sep 7, 2012 at 23:58
  • No idea. Your question is good. Commented Sep 8, 2012 at 0:02
  • thanks man, i wish it showed who downvoted because it would help to ask what they think for advice for the future. Commented Sep 8, 2012 at 0:03
  • Showing who downvoted you might seem like a good idea, but people might get mad at those who downvote them and in turn start downvoting that person's questions and answers as an act of revenge. Commented Sep 8, 2012 at 0:05
  • yep, i know, it's just that i really want to know what the problem was. Commented Sep 8, 2012 at 0:07

3 Answers 3

Reset to default
1

You need to add in [0] to your jquery code to get the document element, but that is rather pointless with the jquery method of adding event listeners. I would suggest either $('#but').mouseout(etc) or $('#but').on('mouseout', etc).

I've updated your jsfiddle to work as expected, though I'll attempt to give a short tut here:

There are two methods of adding event listeners you should familiarize yourself with per the jquery documentation; the .on() method, and the .(event)() method. The latter you can add to jquery ojects in lieu of object.(eventName)() as an example, adding the click handler to an object: object.click(function() { console.log('executed'); });

This method however is not 'live' it will not update itself if the elements are added dynamically, and the events are only attached when the document is ready($(document).ready(function() { do stuff });). In order to attach events to dynamically added elements, we need the .on() method.

Take for example the following html:

<div class="wrapper">
    <span class="dynamically_added">stuff</span>
</div>

In order to attach an event listener to the dynamically added span, in your jquery, add the following:

$(".wrapper").on('click', '.dynamically_added', function() {
    console.log('executed');
});

The first parameter of .on() is(are) the event(s). You can attach multiple events by delimiting them with spaces: .on('click hover'). The second parameter is either the function to execute, or the targeted element. In the case of the above example it is the span. The last parameter is of course the function to execute. As far as I am aware, you need to have an anonymous function to refer to the function to execute, instead of simply writing it there.

I hope this has helped.

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

thanks but I haven't learned about jquery's methods on event listeners, do you have a referral on a tutorial for those?
@IlanBiala I've expanded my answer.
I see, so much help. One question about what an anonymous function is, i that function() { code here } instead of function bigFont() { code here } ?
Yes, that anonymous function is supposed to be function() { code here } versus what you just posted.
1

$('#but') returns a jQuery object, not a DOM object. You can either call jQuery methods on that or you can get the DOM object out of it, but you can't use DOM methods directly on it. If you want the DOM object out of it, you can get it with:

$('#but')[0]

And, your method would be this:

function init() {
    var but = $('#but')[0];
    but.addEventListener("mouseover", butResult, false);
    but.addEventListener("mouseout", reverse, false);
    var button = $('#button')[0];
    button.addEventListener("mouseover", buttonResult, false);
    button.addEventListener("mouseout", reverse, false);
}

Or, instead of using native DOM methods, you can use jQuery methods on the jQuery object.

function init() {
    $('#but').on("mouseover", butResult).on("mouseout", reverse);
    $('#button').on("mouseover", buttonResult).on("mouseout", reverse);
}
Improve this answer

4 Comments

thanks for the awesome answer, I got a question for you on your first sentence. What's the difference between a jq obj and a DOM obj? the [0] has to do with jquery collections, i read that, but i don't know what jquery collections are.
@IlanBiala - a jQuery object is a javascript object that has a ton of helpful methods added to it. Inside that jQuery object is an array of DOM objects. [0] reaches into the array of DOM objects and gets the first DOM object from that array. I've also added some new code examples to my answer.
ok thanks for the explanation, really cleared stuff up. And for future, why [0], what does [0] do compared to [1]?
It's an array. [0] gets the first element in the array, [1] gets the second element in the array. Since you used an ID as the selector, there will only be one element in the array max.
0

Not sure if I understand you ? completely, but, is this what you're roughly looking for:

var b1 = document.getElementById('button');
var b2 = $(b1);
    b2.click( function(){
      alert('hi');            
    })
Improve this answer

1 Comment

this isn't useful because i want to replace document.getelementbyid with jquery

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.