JS开发购物车点击商品添加按钮无法渲染购物项问题求助

问题原因&修复方案 #

你遇到的加购后购物车不渲染的问题，以及隐藏的其他bug，都是以下3处代码问题导致的：

1. JS执行时机错误，加购按钮没绑定上事件
   你给script标签加了async属性，JS加载完成后会立刻执行，若此时页面DOM还没解析完成，getElementsByClassName('shop-item-button')会返回空集合，没有给加购按钮绑定点击事件，点击自然无响应。
2. 购物车条目模板逻辑错误
   你在addItemToCart方法中拿到了商品标题参数，但实际拼接HTML模板时没有用到，反而重复输出了价格，同时用于判断商品是否重复加购的cart-item-title类也没有绑定，会导致重复校验失效、购物车看不到商品名称。另外你拿到的商品价格本身已经带$符号，模板里又额外加了一次，会出现$$12.99这类显示错误。
3. 购买按钮逻辑报错
   purchaseClicked方法中获取购物车容器时，getElementsByClassName方法不需要加类选择器的.前缀，你多写了.会导致获取元素失败，点击购买按钮直接报错。

具体修改代码 #

1. 修改JS引入标签

把head中的script标签的async属性改为defer，保证DOM完全解析后再执行JS，如果你确实要使用Tailwind样式，需要补充引入CDN，否则写的Tailwind类不会生效：

<script src="store.js" defer></script>
<script src="https://cdn.tailwindcss.com"></script>

2. 修复purchaseClicked函数

function purchaseClicked() {
    alert('Thank you for your purchase');
    // 去掉类名前的.
    let cartItems = document.getElementsByClassName('cart-items')[0];
    while (cartItems.hasChildNodes()) {
        cartItems.removeChild(cartItems.firstChild);
    }
    updateCartTotal();
}

3. 修复addItemToCart中的条目模板

let cartRowContents = `
<div class="grid align-middle grid-cols-3 gap-2 my-4">
    <img class="h-28 w-28" src="${imageSrc}" alt="Product"/>
    <div>
        <h4 class="cart-item-title">${title}</h4>
        <h5 class="cart-price">${price}</h5>
        <span class="text-red-200 cursor-pointer remove-btn">Remove</span>
    </div>
    <div>
        <input class="cart-quantity-input" type="number" value="1">
        <button class="btn btn-danger" type="button">REMOVE</button>
    </div>
</div>`;

修改完成后点击加购按钮就能正常渲染购物车条目了。

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