事件侦听器无法始终如一地工作 Javascript

Question

我有一个基于网络的测验，它加载了一个新问题，有 4 个选项和它们旁边各自的单选按钮。问题是我在 "next" 按钮上有一个事件侦听器，它会触发一个新问题并加载选项，但问题不会加载。我相信这是因为我每次都重置计步器。还有一点奇怪的是，当事件侦听器触发时，我将它输出到控制台，有时当我按下一个时它不会触发，而其他时候它会触发。我找不到模式。

如果您想查看所有相关代码，我已将相关代码与 link 一起包含在 JSFiddle 中。先感谢您。 http://jsfiddle.net/d0u6cz7o/

function Quiz() {
    this.step = 0;

     this.questionSwap = function () {
         document.getElementById('question').innerHTML = allQuestions[this.step].question;
         document.getElementById('answer0').innerHTML = allQuestions[this.step].choices[0];
         document.getElementById('answer1').innerHTML = allQuestions[this.step].choices[1];
         document.getElementById('answer2').innerHTML = allQuestions[this.step].choices[2];
         document.getElementById('answer3').innerHTML = allQuestions[this.step].choices[3];
};


var quiz = new Quiz();
quiz.questionSwap();

window.addEventListener('load', function() {
    document.getElementById("next").addEventListener("click", function () {
    console.log("Here");
    quiz.questionSwap();
    quiz.step++;
    console.log("current question is " + quiz.step);

    })
});

Answer 1

将提交更改为按钮，删除侦听器并更改旋转顺序：

<input id="next" type="button" value="Next!">


document.getElementById("next").addEventListener("click", function () 
{
    quiz.step++;
    quiz.questionSwap();
    console.log("current question is " + quiz.step);

})

http://jsfiddle.net/d0u6cz7o/4/

事件侦听器无法始终如一地工作 Javascript

Event listener not working consistently Javascript

javascript

events

listener

addeventlistener