weird javascript problem

Question

I'm dynamically inserting some html into the document (by using obj.innerHTML += 'some html'). In that html, there are images with 'imageId_X' ids (ie. imageId_1, imageId_2...). This works fine, but there's something wrong with the following code:

    for (var n = 0; n < pConfig.images.length; n++)
    {
        document.getElementById('imageId_' + n).onclick = function()
        {
            alert(n);
        }
    }

There are 4 elements in the pConfig.images and alert(n) always alerts 4. Why is this happening, what am i doing wrong?

Aside from the Closure Loop Problem: don't use innerHTML+=. This involves serialising the element's existing DOM content into an HTML string, adding to the string, and then parsing everything back into new DOM objects. This is slow and loses any non-serialisable information in the process, including any form field values, JavaScript references or event handlers. — bobince
– bobince, Commented Aug 19, 2010 at 8:18

Artem Barger · Accepted Answer · 2010-08-19 07:57:02Z

3

The cause of your problem is lamba expression in your code. When you define your anonymous function as onclick handler you bound it for outer variable n, which at the end of the loop is always 4 that the reason you get it always 4. To do it the way you have planned it to be you need to do the following:

for (var n = 0; n < pConfig.images.length; n++)
{
    function( n) {
      document.getElementById('imageId_' + n).onclick = function()
      {
        alert(n);
      }
    }( n);
}

Hence you define separate scope for variable.

edited Aug 19, 2010 at 7:57

answered Aug 19, 2010 at 7:54

Artem Barger

41.3k9 gold badges61 silver badges81 bronze badges

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

Comments

sje397 · Accepted Answer · 2010-08-19 07:54:56Z

0

The problem is that each function you create has a reference to the same n variable - the one that is incremented. By the end of the loop, it is at 4 - and all functions you made refer to that variable with that value.

You can work around it with a closure, e.g.:

function closure(n) {
  return function() {alert(n);}
}

for (var n = 0; n < pConfig.images.length; n++)
{
    document.getElementById('imageId_' + n).onclick = closure(n);
}

answered Aug 19, 2010 at 7:54

sje397

41.9k9 gold badges90 silver badges106 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:01:17Z

0

Looks like you need a closure. See How do JavaScript closures work?

edited May 23, 2017 at 12:01

CommunityBot

11 silver badge

answered Aug 19, 2010 at 7:55

Daniel Lee

7,9992 gold badges52 silver badges57 bronze badges

Collectives™ on Stack Overflow

weird javascript problem

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related