本文档旨在指导开发者如何在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); }));
在这个例子中，我们首先使用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!”。
注意事项：
确保按钮的ID格式是可预测的，例如 “answer-1”, “answer-2” 等，这样你才能从中提取答案的索引。数组索引从0开始，因此你需要将从按钮ID中提取的索引减1。在实际应用中，你需要根据你的具体需求来修改代码。例如，你可能需要将结果显示在页面上，或者将结果发送到服务器。
总结
通过结合事件监听器和事件对象，我们可以轻松地获取Trivia游戏中被点击按钮的索引，并将其与正确答案进行比较。这为实现互动性强、用户体验良好的Trivia游戏提供了基础。记住，代码示例只是起点，你需要根据你的具体需求进行修改和扩展。
以上就是实现Trivia游戏中按钮点击索引获取与答案校验的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1586140.html
微信扫一扫 
支付宝扫一扫 
