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.

Kenney · Accepted Answer · 2015-10-22 20:36:46Z

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, 2015 at 20:36

Kenney

9,11317 silver badges21 bronze badges

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

2 Comments

scottysseus Over a year ago

This worked! I have no idea how IIF works; it is something I will have to look into another time.

Kenney Over a year ago

Officially it's called IIFE (i forgot the E). See wikipedia. 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().

Community · Accepted Answer · 2017-05-23 11:44:46Z

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, 2017 at 11:44

CommunityBot

11 silver badge

answered Oct 22, 2015 at 20:38

rajuGT

6,4442 gold badges30 silver badges44 bronze badges

1 Comment

Kick Buttowski Over a year ago

yes you are right, and I do not see any array that contain the list either

Collectives™ on Stack Overflow

Adding click listeners to list items in loop

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related