实现Trivia游戏中按钮点击索引获取与答案校验-html教程-PHP中文网

实现Trivia游戏中按钮点击索引获取与答案校验

花韻仙語

发布： 2025-10-19 09:15:38

原创

851人浏览过

实现trivia游戏中按钮点击索引获取与答案校验

本文档旨在指导开发者如何在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);
  })
);

登录后复制

<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>

登录后复制

在这个例子中，我们首先使用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!"。

注意事项：