Issue in Loop calling

Question

I am working in JavaScript. I have an issue with loop calling.
My code is :

Here is My Array

picArray = []; // Have tried with this too var picArray = new Array();

Here is My onClick function:

handler:function(){
    for(var i = 1; i<picArray.length; i++) {
        alert(picArray[i]);
    }
}

This is my loop to print the values from an array. And my Array is:

var imgSource = document.getElementById(hellow).src;
picArray[hellow] = imgSource;

This array is getting data on a condition. Handler function is called on click of a Button called Upload. The problem is When I press the Upload button it prints the correct values and remain pressed and print the values again. Is there any mistake in my code which compelling the loop to print values for 2 times?
Or anything else is doing this?

Answer 1

I think you should consider using a closure function on clicking the button, for retaining the scope of the outer context. My supposition is that the root of the problem relays on the fact, that when you are entering the loop condition, you are getting the final value only when the loop has finished.

This problem can be solved by creating a function and calling it on each iteration of the loop, while passing i; calling the function will form a brand new execution context where the value of i is retained and can be used in any way within that context, including within the returned function.

Because you didn't post the rest of the code, i only suppose that's the problem. For solving this problem, here is the code i would use on this context:

function handler(n) {
    return function() {
        alert( 'You clicked on: ' + n );
    };
}

for (var i = 0; i < picArray.length; ++i) {
    picArray[i].onclick = handler(i);
}

...or another more elegant way:

for (var i = 0; i < picArray.length; ++i) {
    picArray[i].onclick = (function(n) {
        return function() {
            alert( 'You clicked on: ' + n );
        };
    })(i);
}

Answer 2

It looks like an associative array (since hellow is both an element ID and array key) but you are accessing it like an indexed array.

So you should do this instead:

for (var key in picArray) {
    alert(picArray[key]);
}