Variable Scope will be exceeded

Question

I've got follow source code:

<html>
<head><script type="text/javascript"> 
      function test() 
      { 
        var links = document.getElementsByTagName('a'); 
        for(var i=0; i< links.length; i++) 
        { 
          var link = links[i]; 
          if(link.href) 
          { 
            link.onclick = function() {alert("temp" + i); return false;}; 
          }; 
        }; 
      };
    </script> 
  </head> 
  <body onLoad="test()"> 
    <p><a href="javascript.html">test1</a></p> 
    <p><a href="javascript.html">test2</a></p> 
    <p><a href="javascript.html">test3</a></p> 
  </body> 
</html>

Now, if I click on each link, the browser shows me the same result

temp3

I used Firebug to profile the code and I figured out that he takes the last value of variable i. My questions are 1st Why does the browser use the always the last value from the variable? 2nd How have I change the source code, so the browser will show me 'temp1', 'temp2', etc. ?

Thanks

see all [related questions](http://stackoverflow.com/questions/tagged/javascript+closures+loops). — Anurag, Mar 08 '11 at 09:40

score 2 · Answer 1 · edited May 23 '17 at 12:19

2

I'm sure there are dupes in stackoverflow.com. I've got the link available in another tab, so here it is: Creating closures in loops - common mistake

Here's a dupe: Stackoverflow.com - Please explain use of javascript closures in loops - which gives the two main ways of fixing the problem.

edited May 23 '17 at 12:19

Community

1
1

answered Mar 08 '11 at 09:33

typo.pl

8,812
2
28
29

Thanks, this works. Because all answers work, I take the first to mark it as an accepted answer. Hopefully you won't become said or angry. – Reporter Mar 08 '11 at 09:50
I'll live - at least you picked a valid answer. – typo.pl Mar 08 '11 at 10:43

score 2 · Answer 2 · answered Mar 08 '11 at 09:34

2

The onclick function only grabs a reference to i, and not a copy of its value. As the value keeps changing through iterations of the loop, and since the onclick function is called after this happens, the value of i will always be links.length.

To fix this, you want to preserve a copy of the variable. A common approach is to wrap the function in another one, that is created and called immediately, passing in the current value of i:

(function (new_i) {
    link.onclick = function() {alert("temp" + new_i); return false;}; 
})(i);

answered Mar 08 '11 at 09:34

David Tang

92,262
30
167
149

Thanks, this works. Because all answers work, I take the first to mark it as an accepted answer. Hopefully you won't become said or angry. – Reporter Mar 08 '11 at 09:49
@reporter, not sad or angry, but typo.pl was actually first ;) – David Tang Mar 08 '11 at 10:00

score 0 · Accepted Answer · answered Mar 08 '11 at 09:40

<html>
<head><script type="text/javascript"> 
      function test() 
      { 
        var links = document.getElementsByTagName('a'); 
        for(var i=0; i< links.length; i++) 
        { 
          var link = links[i]; 
          if(link.href) 
          { 

              link.onclick = (function(i) { return
                  function() {alert("temp" + i); return false;}; }) (i);
          }; 
        }; 
      };
    </script> 
  </head> 
  <body onLoad="test()"> 
    <p><a href="javascript.html">test1</a></p> 
    <p><a href="javascript.html">test2</a></p> 
    <p><a href="javascript.html">test3</a></p> 
  </body> 
</html>

Variable Scope will be exceeded

3 Answers3