I'm doing a quiz app, and when the user picks an answer, I want to display the next question. The thing is, the event listener on the other buttons are not removed, only the button the user clicked (using once:true). Is there a way that I can remove all event listeners on the other buttons when only one of them is fired?
Here is my code:
function enableButtons(correctAnswer) {
btns.forEach((btn) => {
btn.addEventListener(
'click',
function () {
if (checkAnswer(btn.textContent, correctAnswer)) {
btn.classList.add('correctAnswer');
} else {
btn.classList.add('wrongAnswer');
}
setTimeout(function () {
removeBtnClasses(btn),
nextQuestion()
}, 2000);
},
{once: true}
)
})
}
You can write removeEventListener method.
A guide for removeEventListener : https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener
And I am not sure about second method but I think you can add disabled attribute to the button, I haven't worked with DOM for long time so I don't remember if second method would work.