我正在为电子商务网站创建购物车,我正在更新与数量相关的商品总价,但我运行了错误?
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;
}
}
我已经尝试了几乎所有我认为可能在某个地方犯的小错误?
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
要么是元素类名写错了(这不太可能,因为你已经检查了 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 } }最后一个解决方案绝对不是最好的解决方案,但可以完成工作。