Weird value for counter variable in javascript [duplicate]

Question

Possible Duplicate:
Javascript infamous Loop problem?

For some reason I get "6" inside my function here for every div element:

for(var i = 1; i <= 5; i++){
  $('<div class="e-' + i + '"></div>').appendTo(something).click(function(){
    alert(i);  // <-- it's 6. wtf??
  });
}

instead of 1, 2, 3, etc.

The class on the other hand it appears to be correctly set..

What am I doing wrong?

This is called the "last one only" problem. Answer below sums it up nicely, and I wrote an article which contains it a while back: lynxphp.com/javascript/javascript-immediate-functions — callumacrae
– callumacrae, Commented Apr 25, 2012 at 14:16

Aidanc · Accepted Answer · 2012-04-25 14:13:35Z

10

Your for loop is being executed at page load time. The alert only fires when there's a click event which is happening after the for loop has finished. Hence the value of i is now 6.

1) Page loads, for loop does its stuff...

2) Sometime later a click event is fired. the value of i at this time is 6 because the forloop has already completed.

answered Apr 25, 2012 at 14:13

Aidanc

7,0411 gold badge28 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

wsanville · Accepted Answer · 2012-04-25 14:22:14Z

5

The problem is that you need to create a closure to capture the value of i at the time you bind the click function.

Try this:

for(var i = 1; i <= 5; i++)
{
  $('<div class="e-' + i + '"></div>')
    .appendTo(something)
    .click(function(value)
    { 
      return function() { alert(value) };
    }(i));
}

edited Apr 25, 2012 at 14:22

answered Apr 25, 2012 at 14:15

wsanville

37.6k8 gold badges78 silver badges102 bronze badges

5 Comments

callumacrae Over a year ago

Why not use an anonymous function? It looks better.

Yoshi Over a year ago

also the var fn inside the loop is misleading as there is no block scope in js.

wsanville Over a year ago

Cool, didn't know about the lack of block scope. Either way, my unedited answer works fine.

Lee Kowalkowski Over a year ago

Eww! I prefer to do it cleaner still: for(var i = 1; i <= 5; i++){createWidget(i);} and move the entire jQuery statement into createWidget or whatever. Why create an anonymous function every iteration?

wsanville Over a year ago

Why create an anonymous function every iteration? You do that to capture the value of i each time. That's what a closure does.

Collectives™ on Stack Overflow

Weird value for counter variable in javascript [duplicate]

2 Answers 2

Comments

5 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Linked

Related