我正在尝试做一个非常简单的 Java 脚本测验来尝试学习该语言。
var result = document.getElementById("result");
var rightAnswer = document.getElementById("correct").addEventListener("click",correctAnswer);
function correctAnswer(){
result.innerText="Correct";
};
var wrongAnswer = document.getElementsByClassName("wrong").addEventListener("click",wrongAnswer);
function wrongAnswer(){
result.innerText="Wrong";
};
当我运行它并测试时，正确的答案工作正常，但错误的答案没有响应。当我查看控制台时，它说“document.getElementsByClassName(...).addEventListener 不是一个函数”，这让我很困惑，因为我看到它的格式与另一行完全相同，但“getElementsByClassName”除外。我不能为同一类的多个按钮添加相同的事件监听器吗？ HTML
<!DOCTYPE html>
<html>
<head>
<title>Quiz</title>
</head>
<body>
<p>Who was the first president of the United States?</p>
<button class='button wrong' type='button'>Thomas Jefferson</button>
<button class='button' id='correct' type='button'>George Washington</button>
<button class='button wrong' type='button'>James Madison</button>
<button class='button wrong' type='button'>John F Kennedy</button>
<p id='result'></p>
<script src='quiz.js'></script>
</body>
</html>
最佳答案
错误控制台中的错误是因为您无法运行链接到 getElementsByTagName() 的 addEventListener()。
getElementsByTagName() 返回一个节点set，而 addEventListener() 是 HTML node 的方法对象，而不是节点集对象。
换句话说，它运行在单个节点上。这意味着我们要么需要迭代节点集并将事件绑定(bind)到找到的每个节点，要么使用事件委托(delegate)。
迭代方法
var wrong = document.querySelectorAll(".wrong");
wrong.forEach(function(el) {
el.addEventListener("click",wrongAnswer, false);
});
委托(delegate)方法
通过事件委托(delegate)，您不是绑定(bind)到每个节点，而是绑定(bind)到共同的父节点或祖先。然后，您询问哪个节点触发了该事件。
我们可以依赖这一点，因为事件“bubble”；它们不仅会为它们所绑定(bind)的元素触发，还会为该元素的子节点/后代节点(从最内层向外)触发。
换句话说，触发元素 (evt.target) 和上下文元素 (this) 可能不相同。
假设所有 .wrong 元素都位于一个公共(public)容器中，ID 为 #wrong。
然后我们可以这样做:
document.querySelector('#wrong').addEventListener('click', function(evt) {
var trigger_el = evt.target;
if (!evt.target.matches('.wrong') return; //do nothing - was some other element
wrongAnswer.call(trigger_el); //call wrongAnswer in the context of the trigger element
}, false);
关于javascript - 为什么我添加的事件监听器只适用于通过 Id 而不是通过类获取的元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48844619/