Question

Ive got a problem with the following loop:

for (var i = 0; i < dataElements; ++i){
  d=document.createElement('div');
  $(d).addClass('overviewbit')
  .appendTo('.overview')
  .click(function(){
    id = i;
  });
}

Every Div sets id to the highest value of the loop but i should be the exact value i gets when its created. So the first div should set it to 1, the second div should set it to 2 and so on. i hope you understand my problem and could help me to find a solution.

Answer 1

This a common problem. When you create the click handler, it’s setting id to i — the variable, not the value i was storing at the time.

The for loop is completing before any of the DIVs are clicked, so i is equal to the final value from the loop for all the click handlers, and as a result all the ids are set to the same value.

With jQuery you can solve this problem by using .data() storage:

for (var i=0; i<dataElements; ++i){
    d=document.createElement('div');
    $(d).addClass('overviewbit')
        .appendTo('.overview')
        .data('val',i)
        .click(function(){
                id = $(this).data('val'); 
            });
}

However, to do things the “proper” way you would use a JavaScript closure:

for (var i=0; i<dataElements; ++i){
    d=document.createElement('div');
    $(d).addClass('overviewbit')
        .appendTo('.overview')
        .data('val',i)
        .click((function(j){
                return function() { id = j; }
            })(i));
}