勾选HTML表格复选框后汇总对应单元格值，innerHTML读取报错如何解决

核心错误点 #

• 第一处直接触发报错的问题：你在获取价格时多余调用了td的索引。代码中let td = tr[i].getElementsByTagName("td")[1]已经拿到了当前行对应价格列的单个DOM元素，并不是节点集合，后续书写td[i].innerHTML时，td[i]为undefined，读取其innerHTML属性就会抛出你遇到的类型错误。
• 第二处逻辑错误：从innerHTML读取到的价格为字符串类型，直接使用+=会触发字符串拼接，而非数值累加，无法得到正确的小计结果。
• 第三处潜在问题：以全局input的数量作为循环边界，若页面后续新增其他input元素，会出现索引和表格行不匹配的问题。

修正方案 #

方案1（更稳妥的遍历逻辑，推荐） #

直接遍历表格行匹配对应元素，索引稳定性更高，修正后的JS代码如下：

function calculate() {
  let table = document.getElementById("myTable");
  let trArr = table.getElementsByTagName("tr");
  let subTotal = 0;
  for (let i = 0; i < trArr.length; i++) {
    const currentCheckBox = trArr[i].querySelector('input[type="checkbox"]');
    if (currentCheckBox?.checked) {
      // 将字符串价格转为浮点数再累加
      const price = parseFloat(trArr[i].getElementsByTagName("td")[1].innerHTML);
      subTotal += price;
    }
  }
  // 保留两位小数输出符合金额显示习惯
  document.getElementById("val").innerHTML = "小计为：" + subTotal.toFixed(2);
}

HTML代码无需修改即可适配。

方案2（仅修改原代码错误点，保留原有遍历逻辑） #

仅需修改两处即可解决报错：

1. 将let price = td[i].innerHTML;改为let price = td.innerHTML;
2. 累加前将price转为数值：subTotal += parseFloat(price);

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