assigning events dynamically

[ajfish]

dear esteemed javascript gurus.

consider the following fragment:

var buttons =
document.getElementById("tr_Toolbar").getElementsByTagName("button");
for (var i=0; i<buttons.length; i++) {
var button = buttons;
button.onmouseup = function() { mouseup(button.id); return false; }
}

during this loop, button.id is correctly returned as the id of the
button being processed, and all the buttons are assigned a mouseup
event. however, whichever button is clicked, the mouseup function is
always invoked with the id of the last button in the list.

I guess it's because the "button.id" in the function definition is
being evaluated at the wrong time.

I have found that in my particular case I can use "this.id" instead.
but can someone explain how "button.id" is evaluated in the context of
the code fragment above.

TIA

Andy

 

[Michael Winter]

var buttons =
document.getElementById("tr_Toolbar").getElementsByTagName("button");
for (var i=0; i<buttons.length; i++) {
var button = buttons;
button.onmouseup = function() { mouseup(button.id); return false; }
}
[snip]

I have found that in my particular case I can use "this.id" instead.
but can someone explain how "button.id" is evaluated in the context of
the code fragment above.

In short, each function references the same scope chain, therefore each
function object shares the same values, including any changes, for each
property in that chain.

This issue has been discussed several times in the past. Search the
group archives for the words, "closure" and "loop".

Mike

 

[ASM]

(e-mail address removed) a écrit :

consider the following fragment:

var buttons =
document.getElementById("tr_Toolbar").getElementsByTagName("button");
for (var i=0; i<buttons.length; i++) {
var button = buttons;
button.onmouseup = function() { mouseup(button.id); return false; }
}

during this loop, button.id is correctly returned as the id of the
button being processed, and all the buttons are assigned a mouseup
event. however, whichever button is clicked, the mouseup function is
always invoked with the id of the last button in the list.

Because on each passage the previous variable 'button' is assigned to a
new element still last of the list.
So in fact 'button' is definitively this last element, everywhere it is
called.

I have found that in my particular case I can use "this.id" instead.

When event is fired (onmouseup) in an element 'this' is this element and
'this.id' is its id.

 

[ajfish]

<snip>

thanks mike - found the posts. when my brain is up to the job I'll try
and go back to make sense of them