Recall javascript array index value

Question

I'm implementing a way to track clicks in a tabbed content section.

When I click any tab, the parameter is passing as clicked=tab4. It should be clicked=tab(value of 0-3). It looks like it's returning the length of the array? How can I make the event listener function keep the index value of the array.

Example: when I click tab1, the variable "i" in the event listener should be 0.

Here is my code. It works except for this one part, and I can't figure out why.

function clickTrack(){
    var tabs = ['tab1', 'tab2', 'tab3', 'tab4'];
    for(i = 0; i < tabs.length; i++) {
        document.getElementById(tabs[i]).addEventListener("click", function(){
                trackingFunction('param1','clicked=tab'+ i); 
                            alert(i);
                });

        }
}

[A dup](http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example), though it is not about event handling, but you can apply the ideas. — Teemu, Oct 08 '14 at 17:02

Dalorzo · Answer 1 · 2014-10-08T17:06:18.330

You have to define an new execution context in order to save the state of the index variable like:

function clickTrack(){
        var tabs = ['tab1', 'tab2', 'tab3', 'tab4'];
        for(i = 0; i < tabs.length; i++) {
            (function(index){
            document.getElementById(tabs[i]).addEventListener("click", function(){
                    trackingFunction('param1','clicked=tab'+ index); 
                                alert(i);
                    });
            })(i);
            }
    }

An Immediately-Invoked Function Expression can be used to “lock in” values and effectively save state of the index variable.

"Don't create functions in loops." – Teemu Oct 08 '14 at 17:01 — Teemu, Oct 08 '14 at 17:01

jmar777 · Answer 2 · 2014-10-08T17:10:01.833

This would be a lot cleaner with forEach():

function clickTrack(){
    ['tab1', 'tab2', 'tab3', 'tab4'].forEach(function(tabId) {
        document.getElementById(tabId).addEventListener("click", function(){
            trackingFunction('param1','clicked=' + tabId);
            alert(tabId);
        });
    });
}

Note: Array#forEach is IE9+, so you would need to polyfill it for older browsers.

Regarding the why part of your question, let's look at a relevant subset of your code:

for(i = 0; i < tabs.length; i++) {
    document.getElementById(tabs[i]).addEventListener("click", function(){
        alert(i);
    });
}

The thing to note here is the closure that is created by click event handler. Specifically, it retains a reference to the i variable, which continues to be incremented until the i < tabs.length condition fails. All those increments happen synchronously, so by the time the click handler ever runs, it's guaranteed that the value of i will be tabs.length.

If you compare that with the forEach() example, you'll notice that the variable being enclosed by the click handler is tabId, which is a unique, new variable for each iteration, and therefore doesn't suffer from the same issues as the for loop.

score 0 · Accepted Answer · answered Oct 08 '14 at 17:07

Replace "i" for its id...

http://jsfiddle.net/yzu7kLf4/

Try this:

function clickTrack(){
    var tabs = ['tab1', 'tab2', 'tab3', 'tab4'];
    for(i = 0; i < tabs.length; i++) {
        document.getElementById(tabs[i]).addEventListener("click", function(){
               trackingFunction('param1','clicked='+ this.id);
        });

    }
}

Recall javascript array index value

3 Answers3