使用addEventListener遇报错“addEventListener is not defined”的问题排查

嘿，我看到你刚学JS和DOM时碰到了这个棘手的报错，咱们一步步拆解问题根源：

报错的核心原因 #

你这段代码里有两个关键小错误，直接导致了addEventListener is not defined报错：

• 第一个：getElementsByClassName的参数是不带点的纯类名，你写成.submit就错了，正确写法是submit；
• 第二个：这个方法返回的是HTMLCollection（类数组对象），不是单个DOM元素！只有单个元素才能调用addEventListener，直接在类数组上调用当然会报错。

另外你的代码还有个逻辑漏洞：现在的循环会把答案数组里的每个元素都对比一遍，比如用户输入正确时，第一次匹配成功会显示正确，但第二次不匹配又会追加错误提示，这显然不是你想要的效果。

修正后的完整代码 #

// 修正getElementsByClassName的类名写法，去掉多余的点
var inputElements = document.getElementsByClassName('userInput');
var submitButtons = document.getElementsByClassName('submit');
var numAnsCorrect = 0;
var numAnsIncorrect = 0;
var questionsRight = document.querySelector('.questionsRight');
var questionsWrong = document.querySelector('.questionsWrong');
var answers = ['SAVANNAH', 'NATHAN DEAL'];

// 遍历所有提交按钮，给每个按钮单独绑定点击事件
for (let i = 0; i < submitButtons.length; i++) {
  submitButtons[i].addEventListener('click', function() {
    // 获取当前按钮对应的输入框（假设按钮和输入框一一对应）
    let userInput = inputElements[i];
    let response = userInput.value.toUpperCase();
    // 确保获取当前问题对应的结果展示元素
    let result = userInput.parentElement.querySelector('.question-result');
    let currentButton = this;

    // 用includes判断输入是否在答案数组中，避免重复执行判断逻辑
    if (answers.includes(response)) {
      result.textContent = 'That is correct!';
      numAnsCorrect++;
      questionsRight.textContent = numAnsCorrect;
    } else {
      result.textContent = 'That is incorrect';
      numAnsIncorrect++;
      questionsWrong.textContent = numAnsIncorrect;
    }
    currentButton.style.display = "none";
  });
}

关键改动说明 #

• 修正了getElementsByClassName的类名参数，去掉了多余的.；
• 用for循环遍历所有提交按钮，给每个按钮单独绑定点击事件；
• 改用includes()方法判断输入是否在答案数组中，避免了重复执行判断逻辑；
• 调整了获取result元素的方式，确保每个输入框对应自己的结果展示区域（如果你的DOM结构不同，可以根据实际情况修改这部分）；
• 用this指代当前点击的按钮，避免重复查询DOM，提升性能。

这样修改后，代码应该就能正常运行啦！

内容的提问来源于stack exchange，提问作者Shane Harper