8

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.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Bruce
  • 105
  • 1
  • 1
  • 4

1 Answers1

13

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);
};
sunetos
  • 3,448
  • 1
  • 23
  • 14
  • 6
    you can also get the id/value from the e.target object. (e.target.id ...) – Andir Jul 14 '10 at 18:21
  • Thanks for the quick answer. I did something similar that seems to work: ans_el.setAttribute( 'onclick', 'myFunc( this.id, this.value )' ); I've only tested this in FF, I'm sure Internet Explorer will require prodigious hoop-jumping to accomplish the same. I'm very tempted to tell my users that I.E. will not be supported. – Bruce Jul 14 '10 at 18:23
  • That will work, but using strings of js code to be eval()ed like that is generally frowned upon. It is usually slow, buggy, and presents a number of security problems. See http://stackoverflow.com/questions/197769/when-is-javascripts-eval-not-evil/198031#198031 – sunetos Jul 14 '10 at 18:26