如何为带按钮的考试分数计算程序添加数值求和功能？

当前代码每次点击按钮只会添加单个分数条目，要实现求和功能，核心是维护一个全局的总分变量，每次操作后更新总分并同步到页面显示。下面是具体的修改步骤和完整代码：

1. 调整HTML（新增总分展示区域） #

在原有HTML末尾添加一个用于显示总分的元素：

<input id="box" type="hidden" />
<button onclick="wrong_answer()" id="button1">WRONG ANSWER!</button>
<button onclick="correct_answer()">CORRECT ANSWER!</button>
<div id="div1" class="div_wrong"></div>
<div id="div2" class="div_correct"></div>
<!-- 新增总分显示区域 -->
<div id="totalScore" style="font-size: x-large; font-weight: bold; margin-top: 20px;">当前总分：0</div>

2. 修改JavaScript（添加总分逻辑） #

用全局变量记录总分，每次点击按钮后更新总分并刷新页面显示：

// 全局变量存储当前总分，初始值为0
let totalScore = 0;

function wrong_answer() {
  const score = -1; // 错误题目扣1分，直接定义更直观
  totalScore += score;
  
  const div_ele = document.createElement("div");
  div_ele.innerHTML = score;
  document.getElementById("div1").appendChild(div_ele);
  
  updateTotalDisplay(); // 更新页面上的总分
}

function correct_answer() {
  const score = 3; // 正确题目加3分，直接定义更直观
  totalScore += score;
  
  const div_ele = document.createElement("div");
  div_ele.innerHTML = score;
  document.getElementById("div2").appendChild(div_ele);
  
  updateTotalDisplay(); // 更新页面上的总分
}

// 专门负责更新总分显示的函数
function updateTotalDisplay() {
  document.getElementById("totalScore").textContent = `当前总分：${totalScore}`;
}

3. CSS保持原有即可（如需美化总分区域可自行调整） #

.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;
}

改动说明 #

• 新增全局变量totalScore持续追踪累计分数，避免每次点击都重新计算所有条目
• 将原本的calc - calc2替换为直接的分数值，代码可读性更强
• 每次操作后调用updateTotalDisplay()同步更新页面上的总分显示，确保实时性

内容的提问来源于stack exchange，提问作者Prabhaan Goyal