Adding one handler with different parameters

Question

I am creating elements in list tag dynamically and I want to add different event handler for all elements in list. How can I achieve this?

var menuLinks = document.getElementsByClassName('test');
    for(var j = 0; j < menuLinks.length; j++)
    {
        var menuLink = menuLinks[j];
        menuLink.onclick = function(e) {
            e.preventDefault();
            console.log(menuLink.innerHTML);
        };
    }

I added the elements in class name test but no matter which ever element I click it always gives me last element.

You simply iterate over the elements and add the handlers? Please elaborate. — Felix Kling
– Felix Kling, Commented Nov 21, 2015 at 16:45
I created elements dynamically. The problem is that when I add event handler, it only calls the handler of the last element in the list even if I click on the first element. — Farooq A. Lodhi
– Farooq A. Lodhi, Commented Nov 21, 2015 at 16:54
Then you are probably doing something wrong. Please post your code. See minimal reproducible example. — Felix Kling
– Felix Kling, Commented Nov 21, 2015 at 16:57

Felix Kling · Accepted Answer · 2015-11-21 17:04:05Z

1

Your problem is that you are creating a closure inside a loop. See JavaScript closure inside loops – simple practical example for an explanation and generic solution.

In short: JavaScript doesn't have block scope. Since there is only a single menuLink variable, every handler refers to that one variable. The variable can of course only have one value, which is the one that is set in the last iteration.

However, in your case there is a simpler solution: You can use this inside the event handler to refer to the element. You don't need to rely on the loop variable:

menuLinks[j].onclick = function(e) {
  e.preventDefault();
  console.log(this.innerHTML);
};

Learn more about this in event handlers.

answered Nov 21, 2015 at 17:04

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

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

Comments

Azad · Accepted Answer · 2015-11-21 17:09:17Z

0

try this,

var menuLinks = document.getElementsByClassName('test');
        for(var j = 0; j < menuLinks.length; j++)
        {
            var menuLink = menuLinks[j];
            menuLink.onclick = function(e) {
                e.preventDefault();
                console.log(e.target.innerHTML);
            };
        }

edited Nov 21, 2015 at 17:09

answered Nov 21, 2015 at 16:56

Azad

5,2725 gold badges32 silver badges59 bronze badges

1 Comment

Felix Kling Over a year ago

What makes you think the OP uses jQuery?

Collectives™ on Stack Overflow

Adding one handler with different parameters

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related