如何获取输入字段的总价值？实现数量与面值乘积的汇总

问题说明 #

需要实现：用户输入不同面值的数量，计算每个面值的总金额（数量×面值），并汇总所有面值的总金额。现有代码能正确计算单一面值的结果，但总金额仅累加了输入的数量，未乘以对应面值，导致结果错误。

错误原因 #

原代码中window.onchange事件逻辑错误，直接将输入框的数值相加，没有关联对应的面值进行乘法计算；同时代码存在大量重复的事件监听，冗余度高。

修复方案 #

优化后的HTML #

给每个输入框添加data-denomination属性存储对应面值，统一类名简化选择器操作：

<!DOCTYPE html>
<html>
<head>
  <style>
    table, th, td {
      border: 0px solid;
      font-size: 30px;
    }
    input {
      font-size: 30px;
      text-align: center;
    }
  </style>
</head>
<body>
  <table>
    <tr>
      <th>200</th>
      <th><input name="notes200" type="text" class="denomination-input" data-denomination="200"></th>
      <th class="denomination-result"></th>
    </tr>
    <tr>
      <th>100</th>
      <th><input name="notes100" type="text" class="denomination-input" data-denomination="100"></th>
      <th class="denomination-result"></th>
    </tr>
    <tr>
      <th>50</th>
      <th><input name="notes50" type="text" class="denomination-input" data-denomination="50"></th>
      <th class="denomination-result"></th>
    </tr>
    <tr>
      <th>20</th>
      <th><input name="notes20" type="text" class="denomination-input" data-denomination="20"></th>
      <th class="denomination-result"></th>
    </tr>
    <tr>
      <th>10</th>
      <th><input name="notes10" type="text" class="denomination-input" data-denomination="10"></th>
      <th class="denomination-result"></th>
    </tr>
    <tr>
      <th>5</th>
      <th><input name="notes5" type="text" class="denomination-input" data-denomination="5"></th>
      <th class="denomination-result"></th>
    </tr>
    <tr>
      <th>1</th>
      <th><input name="notes1" type="text" class="denomination-input" data-denomination="1"></th>
      <th class="denomination-result"></th>
    </tr>
    <tr>
      <th>Total1</th>
      <th><input type="text" name="totalnotes" id="total" readonly></th>
    </tr>
  </table>
</body>
</html>

优化后的JavaScript #

统一处理所有输入框的事件，同时计算单一面值结果和总金额：

// 获取所有输入框和总金额输出框
const inputs = document.querySelectorAll('.denomination-input');
const totalOutput = document.getElementById('total');

// 核心计算函数：更新单一面值结果 + 汇总总金额
function calculateTotal() {
  let total = 0;
  inputs.forEach(input => {
    const count = parseInt(input.value) || 0;
    const denomination = parseInt(input.dataset.denomination);
    const singleResult = count * denomination;
    // 更新当前行的单一面值结果
    input.parentElement.nextElementSibling.textContent = singleResult;
    // 累加至总金额
    total += singleResult;
  });
  totalOutput.value = total;
}

// 给每个输入框绑定事件：失焦/输入时触发计算
inputs.forEach(input => {
  input.addEventListener('blur', calculateTotal);
  input.addEventListener('input', calculateTotal); // 可选：实现实时计算
});

// 页面加载完成后初始化计算
calculateTotal();

修复说明 #

1. 数据属性关联面值：通过data-denomination将输入框与对应面值绑定，避免硬编码，大幅减少重复代码。
2. 统一事件逻辑：用单个函数处理所有输入变化，同时完成单一面值计算和总金额汇总，逻辑更简洁。
3. 修正总金额计算：先计算每个面值的总金额（数量×面值），再累加得到最终总金额，完全符合需求。
4. 可选实时计算：添加input事件监听，用户输入过程中即可实时更新结果，提升交互体验。

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