本文旨在帮助开发者解决在JavaScript Trivia游戏中如何获取每个按钮的索引，并验证用户选择的答案是否正确的问题。通过使用事件对象和`event.target.id`属性，我们可以轻松地识别被点击的按钮，并将其与正确答案进行比较，从而实现准确的答案验证功能。文章将提供代码示例和详细解释，帮助读者理解和应用这些技术。
在开发Trivia游戏时，一个常见的需求是判断用户点击的按钮对应的答案是否正确。为了实现这个功能，我们需要获取被点击按钮的信息，并将其与正确答案进行比较。JavaScript的事件处理机制为我们提供了便利的方法。
利用事件对象获取按钮信息
当一个事件发生时（例如按钮被点击），事件监听器函数会被调用，并且会接收一个事件对象作为参数。这个事件对象包含了关于事件的各种信息，包括触发事件的元素。我们可以利用event.target属性来获取触发事件的DOM元素，然后通过该元素的id属性或其他自定义属性来区分不同的按钮。
立即学习“Java免费学习笔记（深入）”；
以下是一个示例代码，展示了如何获取被点击按钮的id：
const buttons = document.querySelectorAll(".btn");
buttons.forEach((btnEl) =>
btnEl.addEventListener("click", (event) => {
const clickedButtonId = event.target.id;
console.log('button clicked id -', clickedButtonId);
// 在这里可以根据clickedButtonId进行答案验证
})
);对应的HTML结构如下：
在这个例子中，我们首先使用document.querySelectorAll(".btn")选取所有class为"btn"的按钮。然后，我们遍历这些按钮，并为每个按钮添加一个click事件监听器。当按钮被点击时，事件监听器函数会被调用，并接收一个事件对象event作为参数。我们使用event.target.id来获取被点击按钮的id，并将其打印到控制台。
答案验证
获取到被点击按钮的id后，我们就可以将其与正确答案进行比较。假设我们的randomQuestion对象包含一个correctAnswerId属性，表示正确答案的id，我们可以这样验证答案：
const buttons = document.querySelectorAll(".btn");
buttons.forEach((btnEl) =>
btnEl.addEventListener("click", (event) => {
const clickedButtonId = event.target.id;
console.log('button clicked id -', clickedButtonId);
if (clickedButtonId === randomQuestion.correctAnswerId) {
console.log("Correct!");
} else {
console.log("Incorrect");
}
})
);在这个例子中，我们比较了被点击按钮的id和randomQuestion.correctAnswerId。如果它们相等，说明用户选择了正确的答案，我们就在控制台打印"Correct!"；否则，说明用户选择了错误的答案，我们就在控制台打印"Incorrect"。
注意事项
- 避免重复添加事件监听器： 在实际开发中，应避免像示例代码那样重复添加事件监听器。可以考虑使用事件委托（bubbling & capturing）来优化代码。
- 数据结构设计： 确保你的数据结构能够方便地存储和访问问题、答案和正确答案的信息。例如，可以使用对象数组来存储问题，每个对象包含问题文本、答案数组和正确答案的id。
- 用户体验： 在验证答案后，及时向用户提供反馈，例如显示正确答案、更新分数等。
总结
通过使用事件对象和event.target.id属性，我们可以轻松地获取被点击按钮的信息，并将其与正确答案进行比较，从而实现准确的答案验证功能。在实际开发中，需要注意优化代码结构、设计合理的数据结构，并提供良好的用户体验。希望本文能够帮助你解决在JavaScript Trivia游戏中遇到的问题。
