為什麼我收到無法讀取未定義的屬性（讀取“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
        }
    }

最後一個解決方案絕對不是最好的解決方案，但可以完成工作。