本文档旨在指导开发者如何在Trivia游戏中获取每个按钮的索引，并校验用户选择的答案是否正确。通过事件监听器和事件对象，我们可以轻松区分点击的按钮，进而与正确答案进行比较。本文将提供详细的代码示例和步骤，帮助你理解和实现这一功能。
获取按钮索引
在Trivia游戏中，区分用户点击的是哪个按钮至关重要。JavaScript的事件监听器提供了一个强大的工具来实现这一点：event对象。当一个事件发生时（例如，按钮被点击），事件监听器的回调函数会接收到一个event对象，该对象包含了关于该事件的各种信息，包括触发事件的元素。
以下代码展示了如何使用event.target属性来获取被点击按钮的ID：
const buttons = document.querySelectorAll(".btn");
buttons.forEach((btnEl) =>
btnEl.addEventListener("click", (event) => {
console.log('button clicked id -', event.target.id);
})
);在这个例子中，我们首先使用document.querySelectorAll(".btn")获取所有class为"btn"的按钮元素。然后，我们使用forEach循环遍历每个按钮，并为每个按钮添加一个点击事件监听器。当按钮被点击时，回调函数会被执行，event.target.id会返回被点击按钮的ID。
注意： 在实际生产环境中，不建议像上述代码示例那样为每个按钮单独添加事件监听器。更好的做法是利用事件冒泡（bubbling）或事件捕获（capturing）机制，将事件监听器添加到按钮的父元素上，然后通过event.target来判断是哪个按钮被点击。
校验答案
有了按钮的ID，我们就可以将其与正确答案进行比较。假设你已经有了一个包含问题和答案的对象数组，并且每个答案对象都有一个correct属性，表示该答案是否正确。
以下是一个示例：
const questions = [
{
question: 'What year did the United State gain independence?',
answers: [
{ text: '1776', correct: true },
{ text: '1876', correct: false },
{ text: '1676', correct: false },
{ text: '1576', correct: false }
]
},
];
let randomQuestion = questions[Math.floor(Math.random()*questions.length)];
function checkAnswer(event) {
const clickedButtonId = event.target.id;
const answerIndex = clickedButtonId.split('-')[1]; // 假设ID格式为 "answer-1", "answer-2" 等
const answer = randomQuestion.answers[answerIndex - 1]; // 数组索引从0开始
if (answer.correct) {
console.log("Correct!");
} else {
console.log("Incorrect!");
}
}
const buttons = document.querySelectorAll(".btn");
buttons.forEach((btnEl) =>
btnEl.addEventListener("click", checkAnswer)
);在这个例子中，checkAnswer函数接收event对象作为参数。我们首先通过event.target.id获取被点击按钮的ID，然后从ID中提取答案的索引。接下来，我们使用该索引从randomQuestion.answers数组中获取对应的答案对象。最后，我们检查answer.correct属性，并根据结果输出"Correct!"或"Incorrect!"。
注意事项：
- 确保按钮的ID格式是可预测的，例如 "answer-1", "answer-2" 等，这样你才能从中提取答案的索引。
- 数组索引从0开始，因此你需要将从按钮ID中提取的索引减1。
- 在实际应用中，你需要根据你的具体需求来修改代码。例如，你可能需要将结果显示在页面上，或者将结果发送到服务器。
总结
通过结合事件监听器和事件对象，我们可以轻松地获取Trivia游戏中被点击按钮的索引，并将其与正确答案进行比较。这为实现互动性强、用户体验良好的Trivia游戏提供了基础。记住，代码示例只是起点，你需要根据你的具体需求进行修改和扩展。
