本文介绍如何为考试评分系统添加实时总分统计功能，通过维护全局累加变量并更新dom，实现每次点击“正确/错误答案”按钮后自动计算并显示当前总分。
本文介绍如何为考试评分系统添加实时总分统计功能，通过维护全局累加变量并更新dom，实现每次点击“正确/错误答案”按钮后自动计算并显示当前总分。
在当前代码中，每次点击按钮都会创建一个新
元素并追加到对应容器（#div1 或 #div2），但各次得分并未被聚合——这意味着无法得知考生当前总得分。解决该问题的核心在于：引入一个持久化的累加变量，并在每次操作后更新它及对应的显示区域。
✅ 正确做法：使用全局变量 + 实时更新
首先，在所有函数外部声明一个全局变量 sum（推荐使用 let 以避免污染全局作用域）：
let sum = 0;
然后，在 wrong_answer() 和 correct_answer() 函数中：
- 直接使用固定分值（如错误答案扣 1 分 → -1，正确答案加 3 分 → +3）；
- 更新 sum 值；
- 同步更新页面中用于显示总分的元素（例如 ）。
以下是优化后的完整函数逻辑：
let sum = 0;
function wrong_answer() {
const div_ele = document.createElement("div");
div_ele.textContent = "-1"; // 更安全地使用 textContent 而非 innerHTML（防 XSS）
div_ele.className = "div_wrong";
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";
div_ele.className = "div_correct";
document.getElementById("div2").appendChild(div_ele);
sum += 3; // 等价于 sum = sum + 3
document.getElementById("sum").textContent = sum;
}
? HTML 结构补充（关键新增部分）
确保 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>
⚠️ 注意事项：
- 避免重复声明局部变量（如原代码中每次调用都重置 calc），否则无法实现跨调用累加；
- 使用 textContent 替代 innerHTML 可提升安全性与性能（除非需渲染 HTML 标签）；
- CSS 类名已正确定义，无需改动，仅需确保 .div_wrong 和 .div_correct 在样式表中存在；
- 若需支持多次点击同一按钮、或扩展为多题模式，建议将题目状态存入数组或对象中以便后续统计分析。
通过以上改进，系统不仅能清晰展示每道题的得分细节，还能实时呈现累计总分，显著增强交互性与实用性。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
