如何在答题计分系统中实时累加分数并动态显示总分

本文介绍如何修改现有javascript代码，通过全局变量和dom更新实现答题得分的动态累加与实时显示，解决每次点击按钮仅生成单个数值而无法统计总分的问题。

本文介绍如何修改现有javascript代码，通过全局变量和dom更新实现答题得分的动态累加与实时显示，解决每次点击按钮仅生成单个数值而无法统计总分的问题。

在当前代码中，wrong_answer() 和 correct_answer() 函数每次执行都会重新声明局部变量 calc 和 calc2，导致历史分数无法保留——这正是总分无法累计的根本原因。要实现真正的“累加求和”，必须将分数状态提升为全局可访问的持久变量，并在每次操作后更新该值及对应UI。

✅ 正确实现方式：引入全局累加器 + 实时DOM更新

首先，在所有函数外部声明一个全局变量 sum（推荐使用 let 以避免污染全局作用域）：

let sum = 0;

然后重构两个事件函数，移除无意义的局部计算，直接对 sum 进行增减，并同步刷新页面上的总分显示：

function wrong_answer() {  const div_ele = document.createElement("div");  div_ele.innerHTML = "-1"; // 显示本次扣分  div_ele.className = "div_wrong";  document.getElementById("div1").appendChild(div_ele);  sum -= 1; // 累加扣分  document.getElementById("sum").textContent = sum; // 实时更新总分}function correct_answer() {  const div_ele = document.createElement("div");  div_ele.innerHTML = "+3"; // 显示本次加分  div_ele.className = "div_correct";  document.getElementById("div2").appendChild(div_ele);  sum += 3; // 累加得分  document.getElementById("sum").textContent = sum; // 实时更新总分}

? HTML 结构补充说明

需在页面中添加用于显示总分的容器（建议使用 <span> 便于精准更新）：

<div>Sum is: <span id="sum">0</span></div><div id="div1" class="div_wrong"></div><div id="div2" class="div_correct"></div>

⚠️ 注意：原示例中 <div>Sum is: <span id="sum">0</div> 存在标签未闭合问题，已修正为 <span id="sum">0</span>，确保HTML结构合法。

? 关键改进点总结

• 状态持久化：sum 变量脱离函数作用域，贯穿整个会话生命周期；
• 语义清晰化：直接使用 += / -= 操作符替代冗余表达式（如 calc - calc2），提升可读性与可维护性；
• UI响应及时：每次点击均触发 #sum 元素内容更新，实现毫秒级反馈；
• 样式复用：新生成的 <div> 元素显式设置 className，确保样式正确应用（原代码遗漏此步）。

通过以上改造，系统即可稳定支持多次答题操作下的分数累积、历史记录展示与总分实时呈现，为构建完整在线测评界面打下坚实基础。