模拟购物车重复添加商品时Alert未触发问题求助

问题根源 #

1. 多余语法符号导致事件绑定失败：初始的按钮事件绑定代码末尾多了一个无关的}，引发语法错误，导致点击事件无法正常绑定到按钮上。
2. 元素选择器不匹配：检查购物车已有商品时，代码使用product-name类名查找，但实际购物车中显示商品名称的元素类名是checkout-item，导致无法检测到已添加的商品。
3. 属性名大小写错误：JavaScript中字符串内容获取属性是innerText（大小写敏感），代码中写成了innertext，导致商品名称比较永远不成立，无法触发重复提示。

修正后的代码 #

按钮事件绑定代码

var addToCartButtons = document.getElementsByClassName('item-button')
for (var i = 0; i < addToCartButtons.length; i++) {
    var button = addToCartButtons[i]
    button.addEventListener('click', addToCartClicked)
}

购物车添加逻辑代码

function addToCartClicked(event) {
    var button = event.target
    var shopItem = button.parentElement.parentElement
    var cpuName = shopItem.getElementsByClassName('product-name')[0].innerHTML
    var cpuPrice = shopItem.getElementsByClassName('item-price')[0].innerHTML
    var cpuImg = shopItem.getElementsByClassName('cpu-image')[0].src
    addItemToCart(cpuName, cpuPrice, cpuImg)
}

function addItemToCart(cpuName, cpuPrice, cpuImg) {
    var cartRow = document.createElement('div')
    cartRow.classList.add('cart-row')
    var cartItems = document.getElementsByClassName('cart-items')[0]
    // 修正为购物车中实际的商品名称类名
    var cartItemNames = cartItems.getElementsByClassName('checkout-item')
    for (var i = 0; i < cartItemNames.length; i++) {
        // 修正为正确的innerText属性
        if (cartItemNames[i].innerText === cpuName) {
            alert('该商品已在购物车中')
            return
        }
    }
    var cartRowContents = `
        <div class="cart-item cart-column">
            <img class="checkout-cpu" src="${cpuImg}" width="100" height="100">
            <span class="checkout-item">${cpuName}</span>
        </div>
        <span class="cart-column cart-price">${cpuPrice}</span>
        <div class="cart-quantity cart-column">
            <form>
            <input class="checkout-input" type="number" value="1" autocomplete="off">
            </form>
            <button class="btn btn-warning" role="button">REMOVE</button>
        </div>`
    cartRow.innerHTML = cartRowContents
    cartItems.append(cartRow)
}

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