如何在单个Input text中实现数值累加累减并实时更新总数值？

你原有代码是适配多输入框累加求和的逻辑，当前单输入框+加减按钮的场景可直接调整为按钮点击触发运算的逻辑，不需要遍历多个输入框：

• 给「add」「deduct」按钮分别绑定点击事件
• 每次点击时先校验输入框内容是否为有效数字，避免非数字输入导致计算异常
• 根据点击的按钮类型，对全局存储的总数值执行累加/累减操作
• 操作完成后更新总数值的展示即可

完整可运行示例代码 #

页面结构代码 #

<input type="text" id="numberInput" placeholder="请输入数字">
<button id="add">add</button>
<button id="deduct">deduct</button>
<p>总数值：<span id="total">0</span></p>
<!-- 如果总数值需要用输入框展示也可以替换为 <input type="text" id="total" readonly value="0"> -->

逻辑代码 #

// 全局存储总数值
let total = 0;
const numberInput = document.getElementById('numberInput');
const totalEle = document.getElementById('total');

// add按钮累加逻辑
document.getElementById('add').addEventListener('click', function() {
  const inputNum = parseInt(numberInput.value);
  if (!isNaN(inputNum)) {
    total += inputNum;
    totalEle.textContent = total;
    // 操作完成后清空输入框，不需要的话可以删掉下面这行
    numberInput.value = '';
  }
})

// deduct按钮累减逻辑
document.getElementById('deduct').addEventListener('click', function() {
  const inputNum = parseInt(numberInput.value);
  if (!isNaN(inputNum)) {
    total -= inputNum;
    totalEle.textContent = total;
    numberInput.value = '';
  }
})

如果需要同时兼容多输入框求和的场景，可直接在上述逻辑的基础上合并原有遍历求和的分支即可。

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