本文介绍如何在基于按钮点击的答题系统中，通过全局变量和dom操作实现得分的动态累加与实时显示，避免重复声明变量，并确保每次点击都能正确更新总分。
本文介绍如何在基于按钮点击的答题系统中，通过全局变量和dom操作实现得分的动态累加与实时显示，避免重复声明变量，并确保每次点击都能正确更新总分。
在当前的答题计分逻辑中，wrong_answer() 和 correct_answer() 函数每次执行时都重新声明 calc 和 calc2 变量，导致无法跨调用累积分数。核心问题在于：分数状态未被持久化保存。解决方案是引入一个全局可访问的累加变量（如 sum），并在每次点击时更新该变量，同时同步刷新页面上的总分显示区域。
以下是优化后的完整实现：
<!-- HTML 结构 --> <input id="box" type="hidden" /> <button onclick="wrong_answer()" id="button1">WRONG ANSWER!</button> <button onclick="correct_answer()">CORRECT ANSWER!</button> <!-- 总分显示区域（关键新增） --> <div>Sum is: <span id="sum">0</span></div> <!-- 分类记录区域 --> <div id="div1" class="div_wrong"></div> <div id="div2" class="div_correct"></div>
/* 样式保持不变 */
.div_wrong {
font-size: larger;
font-family: "Agency FB";
color: red;
font-weight: 700;
}
.div_correct {
font-size: larger;
font-family: "Agency FB";
color: blue;
font-weight: 700;
}// ✅ 全局累加变量 —— 声明在函数外部，确保状态持久
let sum = 0;
function wrong_answer() {
const div_ele = document.createElement("div");
div_ele.textContent = "-1"; // 推荐使用 textContent 而非 innerHTML（更安全）
document.getElementById("div1").appendChild(div_ele);
sum -= 1; // 等价于 sum = sum - 1
document.getElementById("sum").textContent = sum; // 实时更新总分显示
}
function correct_answer() {
const div_ele = document.createElement("div");
div_ele.textContent = "+3"; // 显示正向加分更直观
document.getElementById("div2").appendChild(div_ele);
sum += 3; // 等价于 sum = sum + 3
document.getElementById("sum").textContent = sum;
}✅ 关键改进点说明：
- 使用 let sum = 0 在函数作用域外声明，使分数在多次调用间持续存在；
- 每次点击仅执行一次加减操作，并立即更新 <span id="sum"> 的文本内容；
- 采用 textContent 替代 innerHTML，避免潜在 XSS 风险（尤其当数据来源不可控时）；
- 移除了冗余变量（如 calc, calc2），逻辑更清晰、可维护性更强。
⚠️ 注意事项：
- 若需支持“撤销操作”或“重置分数”，可扩展添加 reset_score() 函数并重置 sum 和 DOM 内容；
- 如需持久化存储（如刷新后不丢失），可结合 localStorage 保存 sum 值；
- 多个用户并发使用时，此方案仅适用于单页本地计分，服务端场景需配合后端接口。
通过以上重构，系统不仅能准确记录每道题的得分（-1 或 +3），还能实时、可靠地呈现累计总分，为教学评估或交互式测验提供坚实基础。
