js添加事件侦听器不工作

Question

我正在尝试将来自问题数组(q)的一些问答互动式加载到我的页面中，在学生点击两个问题中的一个之后，注册答案并使用js while循环更改问题。我的错误是什么不起作用？

var q = [
  ['NFR', 'Reusability'],
  ['NFR', 'Robustness'],
  ['FR', 'Reporting Requirements'],
  ['FR', 'Historical Data']
];

var correct = 0;
var incorrect = 0;
var total = q.length;
var i = 0;

document.getElementById('nick').innerText = name;
document.getElementById('question').innerText = q[0][1];

var nfr = document.getElementById('non-functional');
var fr = document.getElementById('functional');

function callback(ans) {
  if (q[i][0] === ans) {
    correct++;
  } else {
    incorrect++;
  };
  if (i < q.length - 1) {
    i++;
    document.getElementById('question').innerText = q[i][1];
  } else {
    location.href = "answer.html";
  }
}

nfr.addEventListener('click', callback('NFR'));
fr.addEventListener('click', callback('FR'));

Answer 1

while循环是无休止的循环，因为它在逻辑上所做的唯一事情就是将toNext设置为False，设置一些事件侦听器回调，然后再次计算toNext，这将始终是False。所以i++永远不会被调用，i < q.length永远都是真实的。

去掉while循环。编写一个单独的函数，对答案进行评估，并用下一个问题更新窗口。将该函数用作click事件的回调。在回调函数中，this将设置为调用该函数的对象，因此可以编写如下函数：

function callback() {
    if (this.id == q[i][0]) {
        window.correct++;
    } else {
        window.incorrect++;
    }

    i++;

    set_question(i); // Logic to set the i-th question.
}

编辑

function callback(ans) {
    // This function will return 
    // another function with the ans 
    // variable set, which in turn 
    // will be called as a callback 
    // when needed by the 'click' event.
    return function () {
        if (q[i][0] === ans) {
            correct++;
        } else {
            incorrect++;
        };

        if (i < q.length - 1) {
            i++;
            document.getElementById('question').innerText = q[i][1];
        } else {
            location.href = "answer.html";
        }
    }
}

Answer 2

事件侦听器是异步执行的，您编写的代码可能假定侦听器可以阻止循环执行。要解决这个问题，请尝试删除循环并将切换到下一个问题的逻辑移到侦听器回调中。