In a loop I'm appending a tag that alerts the loop index count. Why does it always alert the last index of the loop?

Question

For your convenience, here's an interactive jsfiddle version of my code. Here's the offending code:

for i in [1, 2, 3, 4, 5, 6, 7, 8]
  console.log "cell #{i} was created!"
  cell = $('<div class="inventory-cell"></div>').mousedown (event) ->
    alert "#{i} was clicked!"
  $("#inventory-grid").append(cell)

And here's the html:

<div id="inventory-dialog" class="dialog">    
    <div id="inventory-grid"></div>    
</div>

Here's how it's supposed to work. This will generate a bunch of cells in a loop. If I click on the first one I want it to alert, "1 was clicked!" and when I click on the last, I want it to say, "8 was clicked!" But for some reason, every one I click on says, "8 was clicked". Why is this happening?

Answer 1

All of the callbacks refer to the same i variable in their body, which will have a value of 8 by the time any of those callbacks have been called.

You need to create a variable local to each specific callback which holds the value of i at the time the callback was created:

(function(j) {
    var cell = $('<div class="inventory-cell"></div>').mousedown(function(event) {
        alert("#{j} was clicked!");
    });

    $("#inventory-grid").append(cell);
})(i);

The functionally equivalent CoffeeScript would be:

do (i) ->
  cell = $('<div class="inventory-cell"></div>').mousedown (event) ->
    alert "#{i} was clicked!"

  $("#inventory-grid").append(cell)

The only difference is that do will shadow i instead of creating a new variable, but the result is the same.

An exact translation would be:

do (j = i) ->
  cell = $('<div class="inventory-cell"></div>').mousedown (event) ->
    alert "#{j} was clicked!"

  $("#inventory-grid").append(cell)

Answer 2

for i in [1, 2, 3, 4, 5, 6, 7, 8]
    do (i) ->
        console.log "cell #{i} was created!"
        cell = $('<div class="inventory-cell"></div>').mousedown (event) ->
            alert "#{i} was clicked!"
        $("#inventory-grid").append(cell)

Fiddle.

Answer 3

You're already using jQuery, and since for-in loops shouldn't be used on arrays (cofeeScript sucks and apparenty renames native javascript stuff), you can just avoid the closure problems with $.each, like so:

$.each([1, 2, 3, 4, 5, 6, 7, 8], function(_,i) {
    var cell = $('<div />', {
        'class': 'inventory-cell',
         on    : {
                  click: function() { alert('#{'+i+'} was clicked!'); }
                 }
    });
    $("#inventory-grid").append(cell);
});

FIDDLE

Answer 4

These two Coffeescript iterations produce the same Javascript function. They just iterate over it in different ways. One uses for (var i=0 ...), the other $.each()

for i in [1..8]
  do (i) ->
    console.log "cell #{i} was created!"
    cell = $('<div class="inventory-cell"></div>').mousedown (event) ->
      alert "#{i} was clicked!"
    $("#inventory-grid").append(cell)
    return

$.each([1..8], (_,i)->
    console.log "cell #{i} was created!"
    cell = $('<div class="inventory-cell"></div>').mousedown (event) ->
      alert "#{i} was clicked!"
    $("#inventory-grid").append(cell)
    return
    )

Native Javascript array iteration could also be used:

[1..8].forEach (i)->

The other Javascript iteration method:

for (i in [1,2,3..]) {}

would have the same problems as the original Coffeescript if it didn't take care to localize the i used in the cell definition.

Answer 5

Don't know about coffeescript... and either don't know why (function(){...})(); is error in fsfiddle..

for(var i=1; i<9;i++){
console.log("cell "+ i + "was created!")
~function(i){
    var cell = $('<div class="inventory-cell"></div>').mousedown(function(){
    alert(i+" was clicked!")
    });
  $("#inventory-grid").append(cell)
}(i);
}