纯Vanilla JS订单表单：forEach总价计算仅生效首个元素的问题

我用纯Vanilla JavaScript（无jQuery）和基础CSS做了个简易HTML订单表单，大概有30个商品，不涉及在线支付。客户可以复制现有商品的HTML代码块添加新商品、修改名称，但无法访问JavaScript代码。为避免重复ID的问题，我只使用CSS类，不使用元素ID。表单包含商品名称、单价，以及数量和总价两个输入框，总价需要随表单填写动态计算为「单价×数量」。

用forEach循环给所有数量和总价预填充0的逻辑能正常作用于所有元素，但第二个计算总价（单价×数量）的循环仅对首个元素生效，其余元素无法正常计算。

我遗漏了什么？是否与数量输入框中的onblur="calculate"命令有关？这段代码参考自他人，此前未使用过该方法，或许应该更换其他方式？

我已查阅类似问题，但它们多使用jQuery、其他JS方案或表格等，与我的场景不符。

JavaScript #

if (document.querySelector('.order-form')) {
    let qty = document.querySelectorAll('.qty');
  let total = document.querySelectorAll('.total');
    [].forEach.call(qty, function(zero) {
    zero.setAttribute('value','0');
    });
  [].forEach.call(total, function(zero) {
    zero.setAttribute('value','0');
    })
}
calculate = function() {
  let qty = document.querySelectorAll('.qty');
  [].forEach.call(qty, function() {
    let price = document.querySelector('.price').innerText;
    let newprice = parseFloat(price).toFixed(2);
    let qty = document.querySelector('.qty').value;
    let newtotal = parseFloat((newprice)*(qty)).toFixed(2);
    let total = document.querySelector('.total');
    total.setAttribute('value',newtotal);
    });
}

CSS #

.order-form {
  margin: 16px;
  width: 100%;
}
.row {
  width: 100%;
}
.prod {
  margin-top: 16px;
}
.price {
  width: 10%; 
  display: inline-block;
}
.price:before {
  content: "Price: £";
}
.input-style {
  width: 70%; 
  display: inline-block;
}
label {
  padding: 0 16px;
}

HTML #

<div class="order-form">
    <div class="prod">Subscription Receipt Book</div>
  <div class="row">
    <div class="price" style="width: 10%; display: inline-block;">4.50</div>
    <div class="input-style">
      <label for="qty">Qty:</label><input class="qty" type="text" name="qty" onblur="calculate()" />
      <label for="total_amt">Total: £</label><input class="total" type="text" name="total_amt" /></div>
  </div>
  <div class="row" style="width: 100%;">
    <div class="prod">General Receipt Book</div>
    <div class="price" style="width: 10%; display: inline-block;">4.00</div>
   <div class="input-style">
      <label for="qty">Qty:</label><input class="qty" type="text" name="qty" onblur="calculate()" />
      <label for="total_amt">Total: £</label><input class="total" type="text" name="total_amt" />
    </div>
  </div>
  <div class="row" style="width: 100%;">
    <div class="prod">Minutes book</div>
    <div class="price" style="width: 10%; display: inline-block;">5.50</div>
    <div class="input-style">
      <label for="qty">Qty:</label><input class="qty" type="text" name="qty" onblur="calculate()" />
      <label for="total_amt">Total: £</label><input class="total" type="text" name="total_amt" />
    </div>
  </div>
</div>

核心问题 #

你的calculate函数里每次都用document.querySelector('.price')、document.querySelector('.qty')这类选择器，它们只会匹配页面中第一个符合选择器的元素，所以循环里每次都在修改第一个商品的总价，其他商品根本没被处理。

修复步骤 #

1. 修改事件绑定，传递当前元素
   把所有数量输入框的onblur="calculate()"改成onblur="calculate(this)"，这样函数能直接拿到触发事件的数量输入框，顺着DOM结构找到对应商品的单价和总价输入框。

2. 重构calculate函数
   不再遍历所有数量框，而是只处理当前触发事件的那一行商品：

if (document.querySelector('.order-form')) {
    let qty = document.querySelectorAll('.qty');
    let total = document.querySelectorAll('.total');
    [].forEach.call(qty, function(zero) {
        zero.setAttribute('value','0');
    });
    [].forEach.call(total, function(zero) {
        zero.setAttribute('value','0');
    })
}
calculate = function(currentQtyInput) {
    // 从当前数量输入框往上找对应的row容器
    const row = currentQtyInput.closest('.row');
    // 在当前row范围内找单价和总价输入框
    const priceText = row.querySelector('.price').innerText;
    const price = parseFloat(priceText);
    // 处理空值或非数字情况，默认按0计算
    const qtyValue = parseInt(currentQtyInput.value) || 0;
    const totalValue = (price * qtyValue).toFixed(2);
    const totalInput = row.querySelector('.total');
    totalInput.setAttribute('value', totalValue);
}

3. 可选优化

• 把数量输入框的type="text"改成type="number"，并添加min="0"，避免用户输入非数字内容：

  <input class="qty" type="number" name="qty" onblur="calculate(this)" min="0" />
  

• 可以把onblur换成input事件，这样用户输入时总价实时更新，体验更好：

  <input class="qty" type="number" name="qty" oninput="calculate(this)" min="0" />
  

为什么原来的循环无效？ #

你之前的forEach循环遍历所有数量框，但每次循环里都重新用document.querySelector取第一个匹配的元素，等于循环多少次就把第一个商品的总价改多少次，其他商品完全没被触及。通过this传递当前元素，再用closest锁定父容器，就能精准定位到当前商品对应的所有元素，解决了匹配错误的问题。

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