本文旨在帮助开发者解决 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 找到对应的答案。
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 能够反映其对应的答案索引。
完整示例代码：
// 假设 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 游戏中按钮索引获取与答案校验的完整指南的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1585811.html
微信扫一扫 
支付宝扫一扫 
