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

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

获取按钮索引并校验答案

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

以下是一种实现方法：

1. 获取所有按钮元素

   立即学习“Java免费学习笔记（深入）”；

   首先，需要获取页面上所有的答案按钮元素。可以使用 document.querySelectorAll() 方法，根据按钮的 CSS 类名或其他选择器来获取这些元素。

   const buttons = document.querySelectorAll(".btn"); // 假设按钮的 class 是 "btn"

2. 为每个按钮添加点击事件监听器

   接下来，需要为每个按钮添加点击事件监听器。可以使用 forEach() 方法遍历按钮数组，并为每个按钮添加 addEventListener() 方法。

   

   Build AI

   为您的业务构建自己的AI应用程序。不需要任何技术技能。

   下载

   buttons.forEach((btnEl) => {
     btnEl.addEventListener("click", checkAnswer);
   });

3. 在 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: 获取正确答案的文本。
   • 最后，比较被点击按钮的文本内容和正确答案的文本内容，判断答案是否正确。

4. HTML 结构

   确保你的 HTML 结构如下，每个按钮都有一个唯一的 ID 和 class。

   Answer 1
   Answer 2
   Answer 3
   Answer 4

完整示例代码

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 游戏场景。 记住，代码只是工具，理解其背后的原理才能更好地应用和扩展。