Adding click listeners to list items in loop

Question

I have the following code:

    // Iterate through each of the children
    for(j = 0; j < len; j++) {
        var entry = sortedArray[j];

        // Each entryLI is a child of nameOL <ol> element
        var entryLI = document.createElement("li"); 

        // Each entryLI should have a unique click listener
        entryLI.addEventListener("click", function(event) {entry.onListItemClick()});

        // Set the text of the <li> to the name of the entry
        var nameNode = document.createTextNode(entry.entryName);
        entryLI.appendChild(nameNode);

        // Append the entry list item to the ordered list
        nameOL.appendChild(entryLI); 
    }

I am trying to, within this loop, give each list item an event listener that handles click events. However, for some reason, clicking on any of the list items calls the event listener of the last item in the list.

Can anyone explain to me why this is?

I am coming to JavaScript from completely different languages and I am struggling with prototype-based classes.

score 3 · Accepted Answer · answered Oct 22 '15 at 20:36

3

The entry variable gets overwritten on each loop. One way to circumvent this is:

for(j = 0; j < len; j++) {

    (function(entry){

       ....

    })(sortedArray[j])

}

This IIF (immediately-invoked-function) scopes the entry variable separately for each iteration.

answered Oct 22 '15 at 20:36

Kenney

9,003
15
21

This worked! I have no idea how `IIF` works; it is something I will have to look into another time. – scottysseus Oct 22 '15 at 23:54
Officially it's called IIFE (i forgot the E). See [wikipedia](https://en.wikipedia.org/wiki/Immediately-invoked_function_expression). Most JavaScript libraries use it. It comes down to declaring a function and immediately calling it; it's a short syntax for `function foo(){}; foo()`. – Kenney Oct 23 '15 at 15:39

score 1 · Answer 2 · edited May 23 '17 at 11:44

1

It is because of the below line

entryLI.addEventListener("click", function(event) {entry.onListItemClick()});

is bounded to variable entry and not to its value. So what ever is assigned or value changed throughout all loop, the value at the last iteration is holded in entry variable and every event handler function will access that variable gets the last value.

Solution: use immediate function as Kenney suggested in this Q thread or check this answer it is less ambiguous.

edited May 23 '17 at 11:44

Community

1
1

answered Oct 22 '15 at 20:38

rajuGT

6,224
2
26
44

yes you are right, and I do not see any array that contain the list either – Kick Buttowski Oct 22 '15 at 20:41

Adding click listeners to list items in loop

2 Answers2