javascript - addEventListener 问题

Question

所以我正在应用我最近对 ​​Javascript 和 DOM 的了解。但是，当我尝试对同一个按钮使用 querySelectorAll 或 getElementsByClassName 但针对不同的问题时，我收到一条错误消息，提示“addEventListener 未定义”。这是我的代码块。

var input = document.getElementsByClassName('userInput');
var submitButton = document.getElementsByClassName('.submit');
var numAnsCorrect = 0;
var numAnsIncorrect = 0;
var questionsRight = document.querySelector('.questionsRight');
var questionsWrong = document.querySelector('.questionsWrong');


submitButton.addEventListener('click', () => {
    let submitButton = document.querySelector('.submit');
    let userInput = document.querySelector('.userInput');
    let response = userInput.value;
    response = response.toUpperCase();
    var answer = ['SAVANNAH', 'NATHAN DEAL'];
    let result = document.querySelector('.question-result');
    for (var i = 0; i < answer.length; i++) {
        if (response === answer[i]) {
            result.textContent += ' That is correct!';
            numAnsCorrect++;
            questionsRight.textContent = numAnsCorrect;
            submitButton.style.display = "none";
        } else {
            result.textContent += ' That is incorrect';
            numAnsIncorrect++;
            questionsWrong.textContent = numAnsIncorrect;
            submitButton.style.display = "none";
        }
    }
});

我做错了什么？我以为我必须遍历按钮，或者可能有另一个按钮的相等运算符，但我不太确定。

Answer 1

当您使用 querySelectorAll() 时或 getElementsByClassName() ，你会得到一个元素列表。您需要从该列表中拉出一个元素才能对其调用 addEventListener()。

例子:

var userInputs = document.getElementsByClassName('userInput');
var input = userInputs[0];