An array disappears in "for" expression,

Question

There's some code, and it's not working.

window.onload = function ()
{
    var div = document.getElementById ('main');
    var img = div.children;
    var i = 1;
    //console.log(img[i]);
    for (var i=1; i != img.length; i++)
    {
        img[i].onclick = function () 
        {
            console.log(img[i]);
        }
    }
}

Please, explain me Why is img[i] in console.log(img[i]); undefined ? How this bug can be fixed?

ref: http://stackoverflow.com/questions/111102/how-do-javascript-closures-work — Yoshi, Jul 23 '13 at 12:43
1.) It is not a bug. 2.) Why do you start with `i=1`? 3.) Read about http://stackoverflow.com/questions/111102/how-do-javascript-closures-work — Amberlamps, Jul 23 '13 at 12:44
second of all, there's no point declaring var i before for loop. — LorDex, Jul 23 '13 at 12:45
What is `i` at the time it is undefined? Also, it looks like you have a 1-indexed array, but JavaScript uses 0-indexed arrays, so you're missing your first element and trying to access `img[img.length]` which will definitely be undefined. — David, Jul 23 '13 at 12:45
@AndréDion - In computer programming? So `window.onload = function()` is the zeroth line of the OP's code? — nnnnnn, Jul 23 '13 at 12:51
@Amberlamps - It _is_ a bug. OP's code has an error causing undesired behaviour, which is the very definition of [bug](http://en.wikipedia.org/wiki/Software_bug). — nnnnnn, Jul 23 '13 at 12:53
Funny how a lot of people got hung up on the `!=` thing and completely missed the closure. — slebetman, Jul 23 '13 at 13:23

score 1 · Answer 1 · answered Jul 23 '13 at 12:43

1

why i!=img.length? Try change to:

for (var i=0; i < img.length; i++)
        {
            img[i].onclick = function () 
            {
                console.log(img[i]);
            }
        }

answered Jul 23 '13 at 12:43

Jayyrus

12,961
41
132
214

This will only work when there is only one element in `img`. – Amberlamps Jul 23 '13 at 12:45
When `i` increments by one and `img.length` is guaranteed to be an integer >= 0, `!=` will work just as well as `<`. Generally it's best to use `<` because it's more error-tolerant, but it doesn't make a difference in this particular case. – JJJ Jul 23 '13 at 12:50
Did you test this? You're still going to get `undefined` logged when the user clicks... – nnnnnn Jul 23 '13 at 12:57
is the element with id main doesn't have children, attribute .children will return an array with 0 elements so with length =0. for loop go from i =0 to 0 so it doesn't go inside – Jayyrus Jul 23 '13 at 12:58
1

By the time the click handlers are executed `i` will be `img.length`, i.e., it will be past the end of the list. – nnnnnn Jul 23 '13 at 13:02

score 0 · Answer 2 · answered Jul 23 '13 at 12:46

0

You are declaring var two times, remove var 1 = 1;

And assign var i value to zero(0)

    for (var i=0; i < img.length; i++)
    {
        img[i].onclick = function () 
        {
            console.log(img[i]);
        }
    }

answered Jul 23 '13 at 12:46

Naveen Kumar Alone

7,536
5
36
57

An array disappears in "for" expression,

2 Answers2