我正在為電子商務網站創建購物車，我正在更新與數量相關的商品總價，但我運行了錯誤？
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;
}
}
我已經嘗試了幾乎所有我認為可能在某個地方犯的小錯誤？
要么是元素類別名稱寫錯了（這不太可能，因為你已經檢查了 100 遍了哈哈），要么是你在渲染之前嘗試訪問它。
檢查是否可以將腳本移到包含 class="cart-box" 的 HTML 標記下方執行，最好是在
結束標記之前。嘗試在 DOM 完全載入後執行 updatetotal()：
window.addEventListener("DOMContentLoaded", () => { updatetotal() });如果在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 } }最後一個解決方案絕對不是最好的解決方案，但可以完成工作。