实现 Trivia 游戏中按钮索引获取与答案校验的完整指南

---

本文旨在帮助开发者解决 Trivia 游戏中如何获取每个按钮的索引，并校验用户选择的答案是否正确的问题。我们将探讨如何利用事件监听器提供的 `event` 对象来区分点击的按钮，并提供可复用的示例代码，同时强调避免在生产环境中使用重复事件监听器的最佳实践，推荐使用事件冒泡和捕获机制。

获取按钮索引与答案校验

在 Trivia 游戏中，需要知道用户点击了哪个按钮，以便判断选择的答案是否正确。通常，每个按钮对应一个答案，而我们需要将用户选择的答案与正确答案进行比较。以下是如何实现这一目标的步骤：

1. 使用 event 对象区分点击的按钮

当使用 addEventListener 添加事件监听器时，回调函数会自动接收一个 event 对象作为参数。这个 event 对象包含了关于事件的各种信息，包括触发事件的元素。我们可以通过 event.target 属性访问到触发事件的按钮元素，并从中获取按钮的 id 或其他自定义属性，从而区分不同的按钮。

const buttons = document.querySelectorAll(".btn");

buttons.forEach((btnEl) =>
  btnEl.addEventListener("click", (event) => {
    const buttonId = event.target.id;
    console.log('button clicked id -', buttonId);
    checkAnswer(buttonId); // 调用 checkAnswer 函数，传入按钮的 ID
  })
);

2. 修改 checkAnswer 函数

修改 checkAnswer 函数，使其接收按钮的 id 作为参数，并根据 id 找到对应的答案。

SONIFY.io

设计和开发音频优先的产品和数据驱动的解决方案

75 查看详情

function checkAnswer(buttonId) {
  const selectedAnswerIndex = parseInt(buttonId.split('-')[1]) - 1; // 从 buttonId 中提取答案索引（假设 buttonId 格式为 "answer-1", "answer-2" 等）
  const selectedAnswer = randomQuestion.answers[selectedAnswerIndex];
  const correctAnswer = randomQuestion.answers.find((answer) => answer.correct);

  if (selectedAnswer === correctAnswer) {
    console.log("Correct!");
  } else {
    console.log("Incorrect");
  }
}

3. HTML 结构

确保 HTML 结构中按钮的 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>

完整示例代码：

// 假设 questions 数组和 randomQuestion 变量已经定义

const buttons = document.querySelectorAll(".btn");

buttons.forEach((btnEl) =>
  btnEl.addEventListener("click", (event) => {
    const buttonId = event.target.id;
    console.log('button clicked id -', buttonId);
    checkAnswer(buttonId);
  })
);

function checkAnswer(buttonId) {
  const selectedAnswerIndex = parseInt(buttonId.split('-')[1]) - 1; // 从 buttonId 中提取答案索引
  const selectedAnswer = randomQuestion.answers[selectedAnswerIndex];
  const correctAnswer = randomQuestion.answers.find((answer) => answer.correct);

  if (selectedAnswer.correct === true) {
    console.log("Correct!");
  } else {
    console.log("Incorrect");
  }
}

// 示例 questions 数组
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 }
        ]
      },
      {
        question: 'What is the capital of France?',
        answers: [
          { text: 'London', correct: false },
          { text: 'Paris', correct: true },
          { text: 'Berlin', correct: false },
          { text: 'Rome', correct: false }
        ]
      }
];

// 随机选择一个问题
randomQuestion = questions[Math.floor(Math.random()*questions.length)];

注意事项与最佳实践

• 避免重复添加事件监听器： 在生产环境中，避免像示例代码中那样为每个按钮都添加独立的事件监听器。这会导致性能问题，特别是当按钮数量很多时。
• 利用事件冒泡和捕获： 推荐使用事件冒泡和捕获机制，将事件监听器添加到按钮的父元素上，然后通过 event.target 属性来判断是哪个按钮触发了事件。这可以显著减少事件监听器的数量，提高性能。
• 代码可读性： 使用清晰的变量名和注释，提高代码的可读性和可维护性。
• 错误处理： 增加错误处理机制，例如，检查 buttonId 是否有效，以及 selectedAnswerIndex 是否在有效范围内。

总结

通过利用 event 对象获取按钮的 id，并将其传递给 checkAnswer 函数，我们可以轻松地判断用户选择的答案是否正确。同时，需要注意避免重复添加事件监听器，并考虑使用事件冒泡和捕获机制来优化性能。遵循这些最佳实践，可以构建一个高效、可维护的 Trivia 游戏。

以上就是实现 Trivia 游戏中按钮索引获取与答案校验的完整指南的详细内容，更多请关注其它相关文章！

# 回调函数  # 自定义  # 或其他  # 中文网  # 相关文章  # 单引号  # 我们可以  # 推荐使用  # 游戏中  # 回调  # 代码可读性  # ai  # 事件冒泡  # html  # 是否正确  # 医疗保健网站优化案例  # 网站推广员的主要做什么  # 湖州正规seo价格  # 推广引流网站  # 平谷区网站建设特价  # 手把手教seo赚钱  # 搭建网站怎么引流推广  # 江苏专业网站建设特点  # 漳州网站建设及推广费用  # 清远服装网站seo优化 

相关栏目： 【 Google疑问12 】 【 Facebook疑问10 】 【 优化推广96088 】 【 技术知识133117 】 【 IDC资讯59369 】 【 网络运营7196 】 【 IT资讯61894 】

相关推荐： 抖音号升级企业号怎么改名字？升级企业号有哪些好处？  《百度畅听版》关闭兴趣推荐方法  手机远程连接电脑方法  php如何实现多域名共享session_php存储session到redis与跨域读取配置  VS Code源代码管理(SCM)视图的进阶使用技巧  大熊猫抓取竹子的“大拇指”其实是什么？蚂蚁庄园课堂今天答案最新11月30日  热血江湖归来医师加点攻略  Retrofit根路径POST请求：@POST("/") 的应用与解析  Golang如何操作指针参数_Go pointer参数传递规则  三星M34录音变声问题_Samsung M34麦克风调整  《via浏览器》强制缩放网页设置方法  英雄联盟争者留名活动介绍  b站如何管理订阅_b站订阅标签分类管理  照片整理的黄金法则是怎样的？ 理解“收集-筛选-归档-备份”四步流程  《大润发优鲜》充值方法介绍  AO3中文版手机快速通道_AO3最新稳定链接更新  《红果免费短剧》下载观看方法  小红书如何引流到私信？引流到私信有用吗？  之了课堂app做题入口  mysql中如何配置字符集和排序规则_mysql字符集排序配置  火狐浏览器如何刷新修复浏览器 火狐浏览器“重置Firefox”功能详解  淘口令快速解析技巧  FullCalendar自定义按钮样式定制指南  《海豚家》注销账号方法  AI图层蒙版怎么用_AI图层蒙版应用技巧与设计实例  在VS Code中进行数据科学和机器学习开发  Animex动漫社正版在线入口 Animex动漫社动漫官方观看网  蛙漫2(台版)正版官网 2025免费网页版分享  腾讯QQ邮箱官方入口 QQ邮箱网页版登录平台  键盘保修需要什么_键盘售后维修流程  《雷电模拟器》截图方法介绍  百度识图图像分析 百度识图识别平台  rabbitmq 持久化有什么缺点？  惠普电脑BIOS界面看不懂怎么办_HP电脑BIOS功能选项解读与设置  POKI小游戏在线免费入口链接 POKI小游戏无下载秒玩玩  告别繁琐SEO！如何使用SyliusSitemap插件自动化生成网站地图，提升搜索引擎排名  鼠标没反应了怎么办 无线/有线鼠标失灵的解决方法【详解】  《绝区零》2.3前瞻|直播|内容介绍  Win10共享文件夹设置方法 Win10局域网文件共享全攻略【教程】  vivo浏览器怎么离线保存网页 vivo浏览器下载完整页面以便无网络时阅读  mail.qq.com登录入口 QQ邮箱网页版直达  吃完饭就犯困是什么原因 餐后嗜睡如何缓解  《U校园》学生登录入口2025  MongoDB聚合管道：高效统计列表中各项的文档数量  喜茶GO更换登录账号方法  传统曲艺莲花落的表演形式是  J*aScript类型数组_TypedArray使用  《星露谷物语》克林特好感度事件介绍  菜鸟驿站的取件码忘了怎么办 手机快速查询指南  《小宇宙》标记不友善评论方法 

 2025-10-18