JS event is firing when DOM is loaded

Question

I'm designing a quiz app for fun. The quiz will show one question, and it's four options to answer. I'm using vanilla JS to update the DOM, and need to add an eventListener for each answer that is rendered. For some reason, the eventListener is firing as soon as the DOM is rendered. Any ideas as to why?

  //add each answer to the answerContainer
  answerContainer.innerHTML = '';
  for (let i = 0; i < allAnswersFlattened.length; i++) {
    let individualAnswer = document.createElement('div');
    individualAnswer.className = 'answer';
    let answerText = document.createTextNode(allAnswersFlattened[i]);
    individualAnswer.appendChild(answerText);
    individualAnswer.addEventListener("click", checkForAnswer(i, allAnswersFlattened));
    answerContainer.appendChild(individualAnswer);
  }

https://stackoverflow.com/a/7137443/12101554 – Samathingamajig Oct 30 '20 at 23:58 — Samathingamajig, Oct 30 '20 at 23:58

score 2 · Accepted Answer · answered Oct 31 '20 at 00:00

You need to do it like this:

individualAnswer.addEventListener("click", function() {
    checkForAnswer(i, allAnswersFlattened));
});

but then you will get issues where i won't be right (since by the time it is clicked, the i value has been incremented.

So probably you should do:

individualAnswer.addEventListener("click", ((i) => function() {
    checkForAnswer(i, allAnswersFlattened));
})(i));

or

individualAnswer.addEventListener("click", checkForAnswer.bind(this, i, allAnswersFlattened));

or have checkForAnswer return a function:

function checkForAnswer(i, allAnswers) => () => {
    // whatever the code was before
}

score 0 · Answer 2 · edited Oct 31 '20 at 00:31

Your event is firing because you call the function here:

individualAnswer.addEventListener("click", checkForAnswer(i, allAnswersFlattened));

checkForAnswer(i, allAnswersFlattened) - executes the funtion, not passes it as argument to addEventListener

What you need to do is to create an event handler from which you would call your "checkForAnswer" (see below myEventListener):

answerContainer.innerHTML = '';
for (let i = 0; i < allAnswersFlattened.length; i++) {
  var myEventListener = function(e) {
    checkForAnswer(i, allAnswersFlattened)
  };
  let individualAnswer = document.createElement('div');
  individualAnswer.className = 'answer';
  let answerText = document.createTextNode(allAnswersFlattened[i]);
  individualAnswer.appendChild(answerText);
  individualAnswer.addEventListener("click", myEventListener );
  answerContainer.appendChild(individualAnswer);
}

JS event is firing when DOM is loaded

2 Answers2