javascript for loop random return

Question

I have this small source of code

for (i = 0; i < elements.length; i++) {
     console.log(i);
     (function (i) {
         if (elements[i]["id"] == id) {
             index = i;
             console.log(i);
         }
     })(i);
}

console.log(index);

I want to find an array's element index where sub element "id" = id; but it returns sometimes 0 simetimes 1. This code is inside a function that is inside a class. and I call the same function twice but with different parameters outside of the class, so first it must show 0 and than 1, but sometimes it shows 1 and than 0. so can you help me? I tried this method too but it doesn't work.

var i = 0;
while (i < elements.length) {
    console.log(elements[i]["id"]);
    if (elements[i]["id"] == id) {
        index = i;
        break;
    } else if (elements[i]["id"] != id) {
        i++;
    }
}

console.log(index);

Here is my test page, If you open it with Chrome (sometimes it happens but in Firefox it happens mostly) you will see that sometimes small image appears but sometimes it disapears when you press the button. You can also see the console output in "inspect elements -> console"

EDIT

I changed my code for better debug like this (as Lando suggested) :

for (i in elements){
    console.log("comparing elements['"+ i +"']['id']: "+ elements[i]["id"] +" with id:' "+ id + "'");
        if(elements[i]["id"] == id){
            index = i;
        }
    }

console.log(index);

and got console ouput:

comparing elements['0']['id']: id2 with id:' id1' Slideshow.js:140
comparing elements['1']['id']: id1 with id:' id1' Slideshow.js:140
1 Slideshow.js:147
comparing elements['0']['id']: id2 with id:' id2' Slideshow.js:140
comparing elements['1']['id']: id1 with id:' id2' Slideshow.js:140
0

When it should be:

comparing elements['0']['id']: id1 with id:' id1' Slideshow.js:140
comparing elements['1']['id']: id2 with id:' id1' Slideshow.js:140
0 Slideshow.js:147
comparing elements['0']['id']: id1 with id:' id2' Slideshow.js:140
comparing elements['1']['id']: id2 with id:' id2' Slideshow.js:140
1

EDIT 2

After seeing the output it turns out that objects in array "elements" change places, elements[0]["id"] becames "id2" where it should be "id1" I can't still difinetly say why is this happening or what to do to fix it. so please if you have any ideas share it.

Here is my JSfiddle link

else if (elements[i]["id"] != id) ?? you can replace this with else — CloudyMarble
– CloudyMarble, Commented Sep 3, 2012 at 14:28
sidenote: the closure in you first snippet is unneeded. You only need this type of construct if something async is involved (e.g. binding event handlers, timeouts, ...) — Yoshi
– Yoshi, Commented Sep 3, 2012 at 14:32
I updated my post where you can see a test web page and the problem itself — Irakli
– Irakli, Commented Sep 3, 2012 at 14:38
Your code is working as expected, reason you are seeing it return 0 and 1 is because that method is being called twice, once with "id1" and once with "id2" $("#has").click(function(){ slideshow.animate('#id1', {opacity: 1}, 500); slideshow.animate('#id2', {x:200, y:100, opacity: 1}, 300); }); — bpatel
– bpatel, Commented Sep 3, 2012 at 14:51

Frank Orellana · Accepted Answer · 2012-09-03 14:55:48Z

1

I think you must change your code to this, with no inner function (closure) (the first console.log will help you debug your code (or you could just use firebug and set a breakpoint in that line)

for (i in elements){
    console.log("comparing elements['"+ i +"']['id']: "+ elements[i]["id"] +" with id:'"+ id + "'");
    if(elements[i]["id"] == id){
        index = i;
        console.log(i);
    }
}

console.log(index);

remember that javascript arrays are not necessarily zero based, and not even necessarily sequential, so the "for in" will help you avoid possible errors. I removed the closure because I don't see you actually need it in this case.

answered Sep 3, 2012 at 14:55

Frank Orellana

1,9381 gold badge22 silver badges29 bronze badges

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

2 Comments

Irakli Over a year ago

I did what you wrote to do and modified my first post.

Frank Orellana Over a year ago

Well as you can see from the logs the problem is not actually the for loop, but the array: in both runs the arrays is like this ['id2', 'id1'] so in the first run when you search for 'id1' it will return '1' while in the second run when you search for 'id2' it will return '0'.

Irakli · Accepted Answer · 2012-09-05 19:55:36Z

1

I found what was the problem. It seemed that sometimes small image was loaded the first so large image was appearing at the top. It is all about image loading. Thank you anyway for your answers, everyone helped me to debug the problem.

answered Sep 5, 2012 at 19:55

Irakli

1,1436 gold badges30 silver badges56 bronze badges

Collectives™ on Stack Overflow

javascript for loop random return

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related