javascript - Pass arguments in forEach -> eventlistener function

Question

How can I solve this?

The code:

answerArr.forEach((div, index) => {
    div.addEventListener('click', () => {
      checkAnswer(div, index);
    });
  });

This works, but my function runs four times. (because I have four divs - in my array, in DOM)

How can I achieve this result: (run function only one but still have EventListener for each div)

answerArr.forEach((div, index) => {
    div.addEventListener('click', checkAnswer(div, index));
  });

I know I can't pass arguments to EventListener.

Thanks!

question from:https://stackoverflow.com/questions/65925850/pass-arguments-in-foreach-eventlistener-function

Answer 1

You can use bind() to ensure that the function is called with the arguments specified.

For example:

answerArr.forEach((div, index) => {
    div.addEventListener('click', checkAnswer.bind(null, div, index));
});

The first argument to bind(), null in this case, is what you're binding the this value of the function to. So if you reference this from inside checkAnswer, it'd refer to that first argument.

This example is assuming that you have 4 different divs that each need an event listener. If you just have one div, you could potentially just reverse the structure:

div.addEventListener('click', (event) => {
    // here you can use the "event" arg to get info about what was clicked
    checkAnswer();
});