本文旨在帮助开发者解决 Trivia 游戏中如何获取被点击按钮的索引，并将其与正确答案进行比较的问题。通过监听按钮的点击事件，利用事件对象获取被点击按钮的ID，从而实现对用户选择答案的校验。本文将提供详细的代码示例和步骤，帮助你轻松解决这个问题。
获取按钮索引并校验答案
在 Trivia 游戏中，通常需要判断用户选择的答案是否正确。一种常见的实现方式是为每个答案按钮添加点击事件监听器，并在点击事件发生时，获取被点击按钮的索引，然后将其与正确答案的索引进行比较。
以下是一种实现方法：
-
获取所有按钮元素
立即学习“Java免费学习笔记（深入）”；
首先，需要获取页面上所有的答案按钮元素。可以使用 document.querySelectorAll() 方法，根据按钮的 CSS 类名或其他选择器来获取这些元素。
const buttons = document.querySelectorAll(".btn"); // 假设按钮的 class 是 "btn" -
为每个按钮添加点击事件监听器
接下来，需要为每个按钮添加点击事件监听器。可以使用 forEach() 方法遍历按钮数组，并为每个按钮添加 addEventListener() 方法。
buttons.forEach((btnEl) => { btnEl.addEventListener("click", checkAnswer); }); -
在 checkAnswer 函数中获取按钮ID并校验答案
在 checkAnswer 函数中，可以通过事件对象 event 获取被点击的按钮元素，然后通过 event.target.id 属性获取该按钮的ID。
function checkAnswer(event) { const clickedButtonId = event.target.id; console.log('button clicked id -', clickedButtonId); // 获取正确答案 const correctAnswer = randomQuestion.answers.find((answer) => answer.correct); // 获取被点击按钮的答案文本 const clickedButtonText = event.target.textContent; // 比较被点击按钮的答案文本和正确答案的文本 if (clickedButtonText === correctAnswer.text) { console.log("Correct!"); } else { console.log("Incorrect"); } }代码解释:
- event.target：指向触发事件的元素，即被点击的按钮。
- event.target.id：获取被点击按钮的 ID 属性值。
- event.target.textContent：获取被点击按钮的文本内容。
- randomQuestion.answers.find((answer) => answer.correct): 找到当前问题中 correct 属性为 true 的答案对象。
- correctAnswer.text: 获取正确答案的文本。
- 最后，比较被点击按钮的文本内容和正确答案的文本内容，判断答案是否正确。
-
HTML 结构
确保你的 HTML 结构如下，每个按钮都有一个唯一的 ID 和 class。
<button id="answer-1" class='btn'>Answer 1</button> <button id="answer-2" class='btn'>Answer 2</button> <button id="answer-3" class='btn'>Answer 3</button> <button id="answer-4" class='btn'>Answer 4</button>
完整示例代码
const buttons = document.querySelectorAll(".btn");
buttons.forEach((btnEl) => {
btnEl.addEventListener("click", checkAnswer);
});
function checkAnswer(event) {
const clickedButtonId = event.target.id;
console.log('button clicked id -', clickedButtonId);
// 获取正确答案
const correctAnswer = randomQuestion.answers.find((answer) => answer.correct);
// 获取被点击按钮的答案文本
const clickedButtonText = event.target.textContent;
// 比较被点击按钮的答案文本和正确答案的文本
if (clickedButtonText === correctAnswer.text) {
console.log("Correct!");
} else {
console.log("Incorrect");
}
}注意事项
- 确保每个按钮都有唯一的 ID，方便在 checkAnswer 函数中识别。
- 避免在生产环境中使用类似示例代码中添加相同事件监听器的方式。可以考虑使用事件委托（bubbling & capturing）来提高性能。
- 在比较答案时，需要注意数据类型的一致性。可以使用 === 严格相等运算符进行比较。
- randomQuestion 变量需要在 checkAnswer 函数执行前被正确赋值。
总结
通过以上步骤，你可以在 Trivia 游戏中轻松获取被点击按钮的 ID，并将其与正确答案进行比较，从而实现答案校验的功能。 这种方法简单易懂，适用于大多数 Trivia 游戏场景。 记住，代码只是工具，理解其背后的原理才能更好地应用和扩展。
