Question

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.

Answer 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.