JavaScript入门问题：获取所有小计值并计算总和

嗨，我看了你遇到的问题啦！你已经用querySelectorAll选中了所有的小计元素，但现在需要把这些元素里的文本内容提取出来转成数字，再累加得到总和对吧？咱们一步步来解决这个问题~

首先，你的Calcul_total函数里，document.querySelectorAll('.total')返回的是一个DOM元素集合，每个value都是一个<td>元素，不是直接的数值。所以你需要获取每个元素的innerText，然后把它转换成数字，再累加起来。

另外还要注意一个情况：如果用户还没输入数量，或者输入的内容无效，小计单元格可能是空的，这时候要把它当成0来处理，避免出现NaN（非数字）的情况。

下面是修改后的Calcul_total函数：

function Calcul_total() {
  let grandTotal = 0;
  const subtotals = document.querySelectorAll('.total');
  
  subtotals.forEach(function(subtotalEl) {
    // 获取小计文本，转成数字，空值或无效值则取0
    const subtotal = Number(subtotalEl.innerText) || 0;
    grandTotal += subtotal;
  });
  
  // 把最终总和放到#total里，保留两位小数更贴合金额场景
  document.getElementById('total').innerText = grandTotal.toFixed(2);
}

另外，咱们也可以优化一下Calcul_Stotal函数，处理用户输入非数字数量的情况，避免小计出现NaN：

function Calcul_Stotal(target) {
  const parent = target.closest('tr');
  // 把输入的数量转成数字，非数字则取0
  const qty = Number(parent.querySelector('.qty').value) || 0;
  const price = Number(parent.querySelector('.price').textContent);
  const subtotal = qty * price;
  parent.querySelector('.total').innerText = subtotal.toFixed(2);
  // 计算小计后直接调用总和计算，不用等blur事件触发
  Calcul_total();
}

这样修改后，不管用户输入什么内容，都能正确计算单条小计和总金额啦。

至于你问的有没有其他方案？其实querySelectorAll已经是很合适的方法了，它能精准选中所有类名为total的元素。如果要换思路的话，你可以在渲染每个商品的时候给价格和数量输入框加上统一的标识（比如data属性），然后通过遍历数量输入框来计算每一项的小计再累加，但对于你当前的代码结构来说，直接用querySelectorAll处理已有的小计元素是最简单直接的方式。

备注：内容来源于stack exchange，提问作者Pieric