JavaScript数组实现多输入框自动计算问题：仅首行生效求助

看起来你遇到的核心问题是：原来的代码只针对固定ID的第一行输入框写了计算逻辑，没法复用在后续行上。咱们可以通过统一输入框的命名/标识规则，结合事件委托来实现15行的批量自动计算，代码更简洁还能灵活扩展。

第一步：调整HTML结构，给输入框加统一标识 #

把每行的输入框用data-row属性标记行号，同时用类名区分输入框类型，这样能快速关联同一行的所有输入框。示例结构如下：

<!-- 第1行 -->
<div class="calc-row">
  <input type="number" class="input8" data-row="1" placeholder="输入值8">
  <input type="number" class="input9" data-row="1" placeholder="输入值9">
  <input type="number" class="input10" data-row="1" placeholder="计算结果" readonly>
</div>
<!-- 第2行 -->
<div class="calc-row">
  <input type="number" class="input8" data-row="2" placeholder="输入值8">
  <input type="number" class="input9" data-row="2" placeholder="输入值9">
  <input type="number" class="input10" data-row="2" placeholder="计算结果" readonly>
</div>
<!-- 重复上述结构到第15行 -->

第二步：编写通用的计算逻辑 #

不用给每个输入框单独绑定事件，而是用事件委托监听全局输入事件，触发时自动定位到当前行并执行计算：

// 监听所有输入事件
document.addEventListener('input', function(e) {
  // 只处理我们关心的输入框
  const target = e.target;
  if (!target.classList.contains('input8') && !target.classList.contains('input9')) {
    return;
  }

  // 获取当前行号
  const rowNum = target.dataset.row;
  // 找到当前行的三个输入框
  const input8 = document.querySelector(`.input8[data-row="${rowNum}"]`);
  const input9 = document.querySelector(`.input9[data-row="${rowNum}"]`);
  const input10 = document.querySelector(`.input10[data-row="${rowNum}"]`);

  // 处理空值/非数字情况，避免出现NaN
  const val8 = parseFloat(input8.value) || 0;
  const val9 = parseFloat(input9.value) || 0;

  // 替换成你的实际计算逻辑（比如原代码中的公式）
  input10.value = val8 + val9;
});

为什么这个方案能解决问题？ #

• 事件委托只需要绑定一次事件，不管是15行还是更多行都能生效，甚至后续动态添加的行也能自动支持
• 通过data-row属性关联同一行的输入框，避免了写15份重复的计算代码
• 用类名替代固定ID，代码更灵活，后续修改需求时也更容易维护

额外优化小建议 #

• 给输入框加上type="number"，限制用户只能输入数字，减少计算错误
• 如果你的计算逻辑比较复杂，可以把计算部分抽成单独函数，比如：

function getCalculatedResult(val8, val9) {
  // 这里写你的复杂公式，比如原代码中的input10 = ...
  return val9 * val8 - val8;
}

然后在事件监听里调用：input10.value = getCalculatedResult(val8, val9);

这样调整后，15行的输入框都能自动触发计算啦！

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