Ich erstelle einen Warenkorb für eine E-Commerce-Website und aktualisiere den Gesamtpreis des Artikels im Verhältnis zur Menge, erhalte jedoch eine Fehlermeldung?
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;
}
}
Ich habe fast alles versucht. Ich glaube, ich mache irgendwo einen kleinen Fehler?
要么是元素类名写错了（这不太可能，因为你已经检查了 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 } }最后一个解决方案绝对不是最好的解决方案，但可以完成工作。