JS购物车结算小计计算错误，document.getElementById设置innerText失效求助

• 变量名冲突导致DOM引用被覆盖：全局定义的sub_total是存储总小计容器的DOM对象，subTotal函数开头直接将sub_total赋值为数字0，直接覆盖了原DOM引用，数字类型不存在innerText属性，因此最终赋值操作完全不生效，这是核心故障原因。
• 数值类型未显式转换：输入框的value属性默认返回字符串类型，未显式转换为数字的情况下，极端场景下会出现计算异常。
• 循环变量未声明：for循环中的变量i未使用let/var声明，会自动提升为全局变量，多个循环逻辑共存时容易出现不可预期的错误。

以下是修复后的完整JS代码：

var cart_price = document.getElementsByClassName('cart_price');
var cart_qty = document.getElementsByClassName('cart_qty');
var cart_total = document.getElementsByClassName('cart_total');
var sub_total = document.getElementById('sub_total');

function subTotal() {
    // 单独定义变量存储总金额，不覆盖原DOM对象引用
    let totalSum = 0;
    // 用let声明局部循环变量，避免污染全局作用域
    for (let i = 0; i < cart_price.length; i++) {
        // 显式转换为数字类型，避免字符串导致的计算错误
        let price = Number(cart_price[i].value);
        let qty = Number(cart_qty[i].value);
        let calculation = price * qty;
        // 保留两位小数符合金额展示规范，不需要可以删除toFixed(2)
        cart_total[i].innerText = calculation.toFixed(2);
        totalSum += calculation;
    }
    sub_total.innerText = totalSum.toFixed(2);
}
subTotal();

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