Possible Duplicate:
Passing values to onclick
I have 100 elements with ids divNum0
,...,divNum99
. Each when clicked should call doTask
with the right parameter.
The code below unfortunately does not close i, and hence doTask
is called with 100 for all the elements.
funct开发者_如何转开发ion doTask(x) {alert(x);}
for (var i=0; i<100; ++i) {
document.getElementById('divNum'+i).addEventListener('click',function() {doTask(i);},false);
}
Is there someway I can make the function called with right parameters?
Although the (correct) answer is the duplicate, I'd like to point out a more advanced method - replacing loops with iterators, which effectively solves javascript "late-bound" closures problem.
loop = function(start, end, step, body) {
for(var i = start; i != end; i += step)
body(i)
}
loop(1, 100, 1, function(i) {
// your binding stuff
})
Create a closure via a self-executing function literal (or a named factory function)
function doTask(x) { alert(x); }
for(var i = 100; i--;) {
document.getElementById('divNum' + i).onclick = (function(i) {
return function() { doTask(i); };
})(i);
}
or use the DOM node for information storage
function doTask() { alert(this.x); }
for(var i = 100; i--;) {
var node = document.getElementById('divNum' + i);
node.x = i;
node.onclick = doTask;
}
The latter is more memory-friendly as no superfluous function objects are created.
精彩评论