JavaScript 问答游戏按钮逻辑修复：解决答案显示错误问题-js教程-PHP中文网

JavaScript 问答游戏按钮逻辑修复：解决答案显示错误问题

心靈之曲

发布： 2025-10-03 13:50:56

原创

903人浏览过

JavaScript 问答游戏按钮逻辑修复：解决答案显示错误问题

针对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);
// ... 等等

登录后复制

这里的问题在于：

AI建筑知识问答

用人工智能ChatGPT帮你解答所有建筑问题

查看详情

监听器累积： 每次加载新问题时，displayQuestion都会调用addEventListener为按钮添加新的监听器。然而，它并没有移除之前为同一按钮添加的旧监听器。这意味着，随着游戏的进行，一个按钮可能会积累多个事件监听器，每次点击都会触发所有这些监听器。
randomArray的过时引用： randomArray是一个在displayQuestion内部生成的数组，用于随机分配答案到不同的按钮ID（answer1到answer4）。当nextQuestion加载新问题时，displayQuestion会生成一个新的randomArray并更新按钮的文本内容。但是，之前添加的事件监听器在创建时，会“记住”它们所处的randomArray值（通过闭包）。因此，当点击一个按钮时，它可能触发的是一个基于旧randomArray值的监听器，从而导致对当前问题的答案判断错误。例如，如果上一题的正确答案在answer3，而新一题的正确答案在answer1，点击answer3可能仍然会触发旧的correctAnswer逻辑（如果它在上一题确实是正确答案），但此时answer3显示的内容却是新一题的错误答案。