本文旨在帮助开发者解决 Trivia 游戏中如何获取被点击按钮的索引，并将其与正确答案进行比较的问题。通过监听按钮的点击事件，利用事件对象获取被点击按钮的ID，从而实现对用户选择答案的校验。本文将提供详细的代码示例和步骤，帮助你轻松解决这个问题。
获取按钮索引并校验答案
在 Trivia 游戏中，通常需要判断用户选择的答案是否正确。一种常见的实现方式是为每个答案按钮添加点击事件监听器，并在点击事件发生时，获取被点击按钮的索引，然后将其与正确答案的索引进行比较。
以下是一种实现方法：
获取所有按钮元素
立即学习“Java免费学习笔记（深入）”；
首先，需要获取页面上所有的答案按钮元素。可以使用 document.querySelectorAll() 方法，根据按钮的 CSS 类名或其他选择器来获取这些元素。
const buttons = document.querySelectorAll(".btn"); // 假设按钮的 class 是 "btn"
为每个按钮添加点击事件监听器
接下来，需要为每个按钮添加点击事件监听器。可以使用 forEach() 方法遍历按钮数组，并为每个按钮添加 addEventListener() 方法。
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。
完整示例代码
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 游戏场景。 记住，代码只是工具，理解其背后的原理才能更好地应用和扩展。
以上就是使用 JavaScript 获取 Trivia 游戏中按钮索引并校验答案的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1585761.html
微信扫一扫 
支付宝扫一扫 
