针对JavaScript问答游戏中点击正确答案却显示错误提示的问题，本文深入分析了事件监听器累积和randomArray引用过时的原因。教程将指导您如何通过重构事件绑定逻辑，确保每次问题切换时，按钮的事件监听器都能正确关联当前答案，从而实现准确的答案反馈和流畅的游戏体验。
问题描述与根源分析
在开发基于vanilla javascript和bootstrap的问答游戏时，开发者遇到了一个棘手的问题：当点击了正确的答案按钮后，页面上显示的却是“incorrect!”，并且一个随机的“incorrect”按钮被高亮。这个问题尤其在引入了nextquestion函数来加载下一题后变得明显。
这个问题的根源在于JavaScript事件监听器的累积效应以及对变量作用域的误解。原始代码在每次调用displayQuestion函数时，都会为答案按钮重新添加事件监听器：
// 原始代码中的部分document.getElementById(`answer${randomArray[0]}`).addEventListener("click", correctAnswer);document.getElementById(`answer${randomArray[1]}`).addEventListener("click", incorrectAnswer1);// ... 等等
这里的问题在于：
监听器累积： 每次加载新问题时，displayQuestion都会调用addEventListener为按钮添加新的监听器。然而，它并没有移除之前为同一按钮添加的旧监听器。这意味着，随着游戏的进行，一个按钮可能会积累多个事件监听器，每次点击都会触发所有这些监听器。randomArray的过时引用： randomArray是一个在displayQuestion内部生成的数组，用于随机分配答案到不同的按钮ID（answer1到answer4）。当nextQuestion加载新问题时，displayQuestion会生成一个新的randomArray并更新按钮的文本内容。但是，之前添加的事件监听器在创建时，会“记住”它们所处的randomArray值（通过闭包）。因此，当点击一个按钮时，它可能触发的是一个基于旧randomArray值的监听器，从而导致对当前问题的答案判断错误。例如，如果上一题的正确答案在answer3，而新一题的正确答案在answer1，点击answer3可能仍然会触发旧的correctAnswer逻辑（如果它在上一题确实是正确答案），但此时answer3显示的内容却是新一题的错误答案。
解决方案核心思路：动态判断与统一事件处理
为了解决上述问题，我们需要采取
以上就是JavaScript 问答游戏按钮逻辑修复：解决答案显示错误问题的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1525885.html
微信扫一扫 
支付宝扫一扫 
