javascript event handler arguments

Question

I have the following Javascript code:

var ans_el = document.createElement( 'input' );
ans_el.setAttribute( 'id', unique_int_value );
ans_el.setAttribute( 'type', 'radio' );
ans_el.setAttribute( 'name', 'group' );
ans_el.setAttribute( 'value', 'myValue' );
ans_el.onclick = myFunction( this.id, this.value ); 

// Add ans_el to DOM.

function myFunction( index, value ) { // do something }

This, of course, does not work as expected. At least not in Firefox 3.6. What happens is the onclick event is fired when the element is created and the arguments passed to myFunction are null. After the element is added to the DOM, the onclick event does not fire when the radio button is select.

I'd be grateful if anyone has some insight into what's happening here, and/or how dynamically adding event handlers can be accomplished.

Answer 1

You need to give a reference to a function for onclick; you are currently executing the function and assigning that result to the onclick handler. This is closer to what you want:

ans_el.onclick = function(e) {
   myFunction(ans_el.id, ans_el.value);
};

UPDATED: Decided to use event.target for a clearer example since Andir brought it up.

ans_el.onclick = function(e) {
   myFunction(e.target.id, e.target.value);
};

Answer 2

I would highly recommend using jQuery (http://jquery.com/), it will help you handle a lot of this in a simple fashion and they've done the work to ensure it's cross browser.

As an example, you could use the click event handler (http://api.jquery.com/click/) and do this:

ans_el.click(function() {
  alert($(this).attr('id'));
  alert($(this).val());
})

Another cool jQuery helper is the live() function which ensures that any future radio buttons added get the same effect. You can use it like so:

$('input[type="radio"]').live('click', function() {
  alert($(this).attr('id'));
  alert($(this).val());
});

Notice I used jQuery to find all inputs of type radio using the awesome selector API documented here: http://api.jquery.com/category/selectors/

Trust me, jQuery makes your life so much easier!