使用JavaScript实现按钮点击自增输入值并自动求和

点击按钮后总计不更新的核心原因有两个：

• 原有输入框绑定的是onchange事件，这个事件仅在用户手动修改输入框内容、且输入框失焦时才会触发，通过JS代码直接修改input的value值不会触发原生change事件，因此点击按钮改值时findTotal函数根本没有执行。
• 原有求和逻辑存在漏洞：判断条件if (fee.valueAsNumber)会把数值0判定为假值直接跳过累加，初始全0状态下计算结果会出错。

以下提供两种实现方式，可根据自身代码维护需求选择。 #

方案1：重构优化（推荐，减少冗余代码） #

不需要写6个几乎完全重复的计数函数，通过通用逻辑统一处理，后续加新的计数项也不用新增函数。

第一步：调整HTML结构 #

给按钮添加关联目标属性，替换输入框的监听事件，给输入框加初始值避免空值计算异常：

<!-- 计数输入框，移除原onchange绑定，设置初始值0 -->
<input type="number" id="eos_count" class="fee" name="qty" value="0" />
<input type="number" id="baso_count" class="fee" name="qty" value="0" />
<input type="number" id="stab_count" class="fee" name="qty" value="0" />
<input type="number" id="seg_count" class="fee" name="qty" value="0" />
<input type="number" id="mono_count" class="fee" name="qty" value="0" />
<input type="number" id="lim_count" class="fee" name="qty" value="0" />

<br /><br />
<!-- 总计框加readonly避免用户手动篡改 -->
<input type="number" name="total" id="total" value="0" readonly />
<br /><br />

<!-- 按钮添加data-target属性，关联对应输入框的id -->
<button class="count-btn" data-target="eos_count">Eosinofil</button>
<button class="count-btn" data-target="baso_count">Basofil</button>
<button class="count-btn" data-target="stab_count">Netrofil Batang</button>
<button class="count-btn" data-target="seg_count">Netrofil Segmen</button>
<button class="count-btn" data-target="mono_count">Monosit</button>
<button class="count-btn" data-target="lim_count">Limfosit</button>

第二步：替换原有JS代码 #

删除原来6个重复的计数函数，替换为通用逻辑：

document.addEventListener('DOMContentLoaded', function() {
  const countInputs = document.querySelectorAll('.fee');
  const totalInput = document.getElementById('total');
  const countBtns = document.querySelectorAll('.count-btn');

  // 求和函数，修复0值漏算问题
  function calculateTotal() {
    let sum = 0;
    countInputs.forEach(input => {
      const val = parseInt(input.value, 10);
      sum += isNaN(val) ? 0 : val;
    });
    totalInput.value = sum;
  }

  // 绑定按钮点击计数逻辑
  countBtns.forEach(btn => {
    btn.addEventListener('click', function() {
      const targetId = this.dataset.target;
      const targetInput = document.getElementById(targetId);
      let currentVal = parseInt(targetInput.value, 10);
      currentVal = isNaN(currentVal) ? 0 : currentVal;
      targetInput.value = currentVal + 1;
      // 数值修改后直接触发求和，无需等待原生事件
      calculateTotal();
    })
  })

  // 监听输入框手动输入，实时计算总和
  countInputs.forEach(input => {
    input.addEventListener('input', calculateTotal);
  })

  // 初始化时计算一次初始值
  calculateTotal();
})

方案2：最小改动（不调整原有代码结构） #

如果不想重构现有代码，仅需两处小修改即可修复问题：

1. 在每个计数函数的末尾添加findTotal()调用，确保数值修改后立即触发求和，以eoscounting为例：

   function eoscounting() {
     var Eos = parseInt(document.getElementById('eos_count').value, 10);
     Eos = isNaN(Eos) ? 0 : Eos;
     Eos++;
     document.getElementById('eos_count').value = Eos;
     findTotal(); // 新增该行，其他5个计数函数做相同修改
   }
   

2. 修复findTotal函数的判断漏洞，避免0值漏算：

   function findTotal() {
     const fees = document.querySelectorAll(".fee");
     const total = document.querySelector("#total");
     let sum = 0;
   
     fees.forEach(fee => {
       const val = parseInt(fee.value, 10);
       sum += isNaN(val) ? 0 : val;
     });
     total.value = sum;
   }
   

修改完成后，无论是点击按钮给对应输入框加1，还是手动修改输入框数值，总计框都会实时更新求和结果。

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