购物车功能JavaScript报错求助：addProductToCart相关问题排查

错误根源分析 #

报错出现在addProductToCart函数第97行，核心是DOM元素未正确插入，导致后续获取元素返回undefined，无法调用addEventListener。存在两个关键拼写错误：

1. innerHTML属性拼写错误（直接触发报错） #

你在addProductToCart中写了：

cartShopBox.innerHtml = cartboxContent;

正确属性名是innerHTML（首字母H大写），小写的innerHtml是无效属性，导致拼接的HTML内容完全没插入到cartShopBox中。后续尝试获取.cart-remove和.cart-quantity自然返回undefined，触发报错。

2. 商品标题类名拼写错误（潜在功能失效） #

模板字符串里的标题类名写成了cart-profuct-title，正确应为cart-product-title（少写了一个d）。这个错误会导致判断商品是否已加入购物车的逻辑失效，因为cartItems.getElementsByClassName('cart-product-title')找不到对应元素。

修复后的核心代码 #

修正addProductToCart函数 #

function addProductToCart(title ,price ,productImg){
    var cartShopBox = document.createElement('div');
    cartShopBox.classList.add('cart-box');
    var cartItems = document.getElementsByClassName('cart-content')[0];
    var cartItemsNames = cartItems.getElementsByClassName('cart-product-title');
    for( var i =0;i<cartItemsNames.length;i++){
        if(cartItemsNames[i].innerText==title){
            alert("You have already add this item to cart");
            return;
        }
    }

    // 修正类名拼写，并替换静态内容为传入的商品参数
    var cartboxContent = `
    <img src="${productImg}"  class="cart-img">
    <div class="detail-box">
        <div class="cart-product-title">${title}</div>
        <div class="cart-price">${price}</div>
        <input type="number" value="1" class="cart-quantity">
    </div>
    <i class='bx bxs-trash cart-remove'></i>`;

    // 修正innerHTML拼写
    cartShopBox.innerHTML = cartboxContent;

    cartItems.append(cartShopBox);

    cartShopBox.getElementsByClassName('cart-remove')[0].addEventListener('click',removeCartItem);
    cartShopBox.getElementsByClassName('cart-quantity')[0].addEventListener('change',quantityChanged);
}

优化addCartClicked的元素获取逻辑 #

避免因点击图标子节点（若后续扩展）导致父元素获取错误：

function addCartClicked(event){
    // 确保获取到正确的.add-cart元素，不受子节点影响
    var button = event.target.closest('.add-cart');
    var shopProducts = button.parentElement;
    var title = shopProducts.getElementsByClassName('product-title')[0].innerText;
    var price = shopProducts.getElementsByClassName('price')[0].innerText;
    var productImg = shopProducts.getElementsByClassName('product-img')[0].src;

    addProductToCart(title,price,productImg);
    updatetotal();
}

优化总价计算逻辑 #

将总价更新代码移到循环外，避免重复执行：

function updatetotal(){
    var  cartContent = document.getElementsByClassName('cart-content')[0];
    var cartBoxes = cartContent.getElementsByClassName('cart-box');
    var total =0
    for( var i =0;i<cartBoxes.length;i++){
        var cartBox =  cartBoxes[i];
        var priceElement = cartBox.getElementsByClassName('cart-price')[0];
        var quantityElement= cartBox.getElementsByClassName('cart-quantity')[0];
        var price = parseFloat(priceElement.innerText.replace("$",""));
        var quantity = quantityElement.value ;
        total = total +(price*quantity);
        total =  Math.round(total *100)/100;
    }
    // 移到循环外，只执行一次更新
    document.getElementsByClassName('total-price')[0].innerText='$'+total;
}

内容的提问来源于stack exchange，提问作者Jason