使用 J*aScript 获取 Trivia 游戏中按钮索引并校验答案

发布时间：2025-10-18

点击量：

使用 javascript 获取 trivia 游戏中按钮索引并校验答案

本文旨在帮助开发者解决 Trivia 游戏中如何获取被点击按钮的索引，并将其与正确答案进行比较的问题。通过监听按钮的点击事件，利用事件对象获取被点击按钮的ID，从而实现对用户选择答案的校验。本文将提供详细的代码示例和步骤，帮助你轻松解决这个问题。

获取按钮索引并校验答案

在 Trivia 游戏中，通常需要判断用户选择的答案是否正确。一种常见的实现方式是为每个答案按钮添加点击事件监听器，并在点击事件发生时，获取被点击按钮的索引，然后将其与正确答案的索引进行比较。

以下是一种实现方法：

获取所有按钮元素

首先，需要获取页面上所有的答案按钮元素。可以使用 document.querySelectorAll() 方法，根据按钮的 CSS 类名或其他选择器来获取这些元素。
```
const buttons = document.querySelectorAll(".btn"); // 假设按钮的 class 是 "btn"
```
为每个按钮添加点击事件监听器

接下来，需要为每个按钮添加点击事件监听器。可以使用 forEach() 方法遍历按钮数组，并为每个按钮添加 addEventListener() 方法。
察言观数AskTable
企业级AI数据表格智能体平台
78 查看详情
```
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 游戏场景。记住，代码只是工具，理解其背后的原理才能更好地应用和扩展。

以上就是使用 J*aScript 获取 Trivia 游戏中按钮索引并校验答案的详细内容，更多请关注其它相关文章！

上一篇：使用条件运算符高效格式化时间字符串

下一篇：掌握React中动态属性值与受控组件的实现