为什么我收到无法读取未定义的属性（读取“innerHTML”）？

Question

我正在为电子商务网站创建购物车，我正在更新与数量相关的商品总价，但我运行了错误？

function updatetotal () {
    const cartContent = document.getElementsByClassName("cart-content")[0];
    const cartBoxes = cartContent.getElementsByClassName("cart-box");
    let total = 0;
    for (let i = 0; i < cartBoxes.length;i++) {
        const cartBox = cartBoxes[i];
        const priceElement = cartBox.getElementsByClassName("cart-price")[0];
        const quantityElement = cartBox.getElementsByClassName("cart-quanity");
        let price = parseFloat(priceElement.innerHTML.replace('$',''))
        const quantity = quantityElement.value;
        total+= price * quantity;
        document.getElementsByClassName("total-price")[0].innerText = '$' + total; 

    }
}

我已经尝试了几乎所有我认为可能在某个地方犯的小错误？

Answer 1

要么是元素类名写错了（这不太可能，因为你已经检查了 100 遍了哈哈），要么是你在渲染之前尝试访问它。

1. 检查是否可以将脚本移动到包含 class="cart-box" 的 HTML 标记下方执行，最好是在 结束标记之前。

2. 尝试在 DOM 完全加载后执行 updatetotal()：

   window.addEventListener("DOMContentLoaded", () => {
      updatetotal()
    });

3. 如果在 DOM 完全加载后通过 Ajax 渲染元素，您可以尝试以下技巧：编写一个函数来检查元素是否存在，如果不存在，则等待几秒钟并调用该函数再次递归：

   let cartBoxes //Global
   
    const delay = ms => new Promise(res => (setTimeout(res, ms)));
   
    async function waitForCartBoxes() {
        cartBoxes = cartContent.getElementsByClassName("cart-box");
        if (cartBoxes.length == 0) { //Not found - wait 500ms and try again.
            await delay(500);
            waitForCartBoxes();
            return
        }
    }

最后一个解决方案绝对不是最好的解决方案，但可以完成工作。