Closure in Javascript

Possible Duplicate:
Passing values to onclick

I have 100 elements with ids divNum0,…,divNum99. Each when clicked should call doTask with the right parameter.

  • How do I access a local variable dynamically (via a String form of its name) from a closure scope?
  • Should every function be a closure?
  • JavaScript parentheses (1,2,3,4,5)
  • Unable to implement module pattern
  • How can I seperate objects that is under same closure into different files
  • Inject variable into callback function scope
  • The code below unfortunately does not close i, and hence doTask is called with 100 for all the elements.

    function 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?

  • How does this JavaScript closure-function reuse an object without a global variable?
  • Confusion regarding javascript closure
  • “Mutable variable is accessible from closure” in a function passed to Array.prototype.every
  • How to pass additional variables in to underscores templates
  • javascript function closure working
  • What am I doing wrong on this simple Closure
  • 2 Solutions collect form web for “Closure in Javascript”

    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.