本文介绍如何为基于按钮点击的答题评分系统添加实时总分统计功能，通过全局变量维护累计分数，并在页面上动态更新显示结果。
本文介绍如何为基于按钮点击的答题评分系统添加实时总分统计功能，通过全局变量维护累计分数，并在页面上动态更新显示结果。
在当前代码中，每次点击“WRONG ANSWER!”或“CORRECT ANSWER!”按钮都会生成一个独立的
元素并追加到对应容器中（#div1 或 #div2），但原始逻辑未对分数进行跨操作累积——每个函数内部都重新声明 calc = 0，导致无法实现真正的求和。
要实现全局总分实时汇总，关键在于：
- 声明一个外部作用域的累加变量（如 let sum = 0），使其在多次函数调用间保持状态；
- 明确每类操作的分值贡献：根据原意，“错误答案”扣1分（即 −1），“正确答案”加3分（即 +3），而非依赖临时计算 calc - calc2；
- 及时更新总分显示区域：新增 并在每次点击后同步刷新其 innerHTML。
以下是优化后的完整实现：
<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>
<style>
.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;
}
</style><script>
let sum = 0; // ✅ 全局累计变量，初始化为0
function wrong_answer() {
const div_ele = document.createElement("div");
div_ele.textContent = "-1"; // 推荐使用 textContent 而非 innerHTML（更安全）
document.getElementById("div1").appendChild(div_ele);
sum -= 1; // 累加 -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; // 累加 +3 分
document.getElementById("sum").textContent = sum;
}
</script>
✅ 注意事项与最佳实践：
- 避免在函数内重复声明 var calc = 0，这会覆盖历史值，破坏累加逻辑；
- 使用 textContent 替代 innerHTML 可防止潜在 XSS 风险（尤其当内容来自用户输入时）；
- 若需支持撤销、重置或持久化存储，可进一步扩展为数组记录明细 + reduce() 计算，或结合 localStorage 保存 sum；
- 建议为按钮添加禁用/反馈机制（如点击后变灰），提升用户体验。
通过以上改造，系统即可稳定、准确地完成多轮答题后的分数汇总，并在界面上清晰呈现当前总分。
