如何实现点击按钮切换加减函数并持续更新sum值？

你的代码核心问题是变量作用域冲突，同时缺少结果展示逻辑，具体问题点：

1. 函数内部用var重复声明stValue、sum等变量，导致全局变量未被实际赋值，减法操作时sum为undefined，计算结果变成NaN。
2. 按钮同时通过HTML属性和JS代码绑定点击事件，会引发重复执行问题。
3. 没有页面元素展示计算后的sum值，仅能通过控制台查看，不符合需求。

以下是修正后的完整代码，同时优化了逻辑结构，用单个状态变量控制加减切换：

HTML 代码 #

<input id="stvalue" type="number" placeholder="初始值" />
<input id="value" type="number" placeholder="待加减值" />
<button id="button">计算</button>
<!-- 添加结果展示区域 -->
<div id="sumDisplay">当前结果：0</div>

JavaScript 代码 #

// 全局存储计算结果和操作状态
let currentSum = 0;
// 标记当前操作：true为加，false为减，首次点击执行加法
let shouldAdd = true;

// 获取页面元素
const calcButton = document.getElementById("button");
const sumDisplay = document.getElementById("sumDisplay");
const stValueInput = document.getElementById("stvalue");
const valueInput = document.getElementById("value");

// 绑定点击事件处理函数
calcButton.addEventListener("click", () => {
  // 获取输入值并转为数字
  const stValue = parseFloat(stValueInput.value);
  const value = parseFloat(valueInput.value);

  // 校验输入有效性
  if (isNaN(stValue) || isNaN(value)) {
    sumDisplay.textContent = "请输入有效的数字";
    return;
  }

  // 根据状态执行加减操作
  if (shouldAdd) {
    // 首次计算用初始值加待加减值，后续用当前结果累加
    currentSum = currentSum === 0 ? stValue + value : currentSum + value;
  } else {
    currentSum = currentSum - value;
  }

  // 更新页面显示结果
  sumDisplay.textContent = `当前结果：${currentSum}`;
  // 切换下一次操作类型
  shouldAdd = !shouldAdd;
});

关键修正说明 #

• 变量作用域修复：移除函数内重复的var声明，确保全局的currentSum和shouldAdd能被正确修改和访问。
• 统一事件绑定：使用addEventListener绑定点击事件，移除HTML中的onclick属性，避免重复触发。
• 结果可视化：新增sumDisplay元素，实时展示计算结果。
• 输入校验：处理非数字输入的情况，避免出现无效计算。
• 简化状态控制：用单个shouldAdd变量控制加减切换，比切换两个函数更简洁易维护。
• 首次计算逻辑：判断currentSum是否为0，确保首次点击使用初始值与待加减值求和。

内容的提问来源于stack exchange，提问作者Kristóf Németh