如何用JavaScript实现多商品加入购物车？现有代码仅支持商品1且仅能添加一次

你的代码出现「只能添加商品1且仅一次、无法添加商品2」的问题，核心原因有三个：

1. ID重复：HTML中重复使用了id="products"和id="Add"，页面中ID必须唯一，getElementById只会返回第一个匹配的元素。
2. 事件绑定不全：仅给第一个按钮绑定了点击事件，第二个按钮完全未生效。
3. 商品关联错误：点击时只会克隆第一个商品，没有关联到当前点击按钮对应的商品。

以下是修复后的完整代码，同时实现了通过自定义属性存储商品ID的功能：

<head>
    <style>
.container{
    background-color: grey;
    color: white;
    position: relative;
    height: 150px;
    width: 150px;
    margin-bottom: 20px;
}

#cart{
    left: 200px;
    position: relative;
    background-color: gray;
    height: 400px;
    width: 500px;
    border: 1px solid;
    text-align: center;
}

.product-item {
    margin: 10px 0;
}
    </style>
</head>

<body>
<div class="container">
    <div class="product-item" data-product-id="1">
        <h1>Product 1</h1>
    </div>
    <button class="add-btn">Add</button>
</div>

<div class="container">
    <div class="product-item" data-product-id="2">
        <h1>Product 2</h1>
    </div>
    <button class="add-btn">Add</button>
</div>

<div id="cart">
    <h1>Cart</h1>
    <div id="cart-items"></div>
</div>

<input type="submit" id="sub">
<input type="text" id="texts">

<script>
const cartItemsContainer = document.getElementById('cart-items');
const addButtons = document.querySelectorAll('.add-btn');
const sub = document.getElementById('sub');

// 处理自定义文本添加购物车
sub.addEventListener("click", ()=>{
    const texts = document.getElementById("texts").value;
    if (!texts) return;
    const text = document.createElement("p");
    text.innerHTML = texts;
    cartItemsContainer.appendChild(text);
})

// 绑定所有添加按钮的点击事件
addButtons.forEach(button => {
    button.addEventListener("click", (event) => {
        // 获取当前按钮对应的商品元素
        const productItem = event.target.previousElementSibling;
        const productId = productItem.dataset.productId;
        
        // 检查购物车中是否已有该商品，实现计数功能
        let existingItem = cartItemsContainer.querySelector(`[data-product-id="${productId}"]`);
        if (existingItem) {
            // 如果已存在，增加数量
            const countElement = existingItem.querySelector('.count');
            countElement.textContent = parseInt(countElement.textContent) + 1;
        } else {
            // 克隆商品元素并添加到购物车
            const clone = productItem.cloneNode(true);
            // 添加数量显示
            const count = document.createElement('span');
            count.className = 'count';
            count.textContent = '1';
            clone.appendChild(count);
            cartItemsContainer.appendChild(clone);
        }
    });
});
</script>
</body>

关键改动说明： #

• HTML部分：

  • 将重复的id改为class（product-item、add-btn），保证页面元素唯一标识。
  • 给每个商品容器添加data-product-id属性，用于存储商品ID。
  • 给购物车添加子容器cart-items，方便管理购物车商品。

• JS部分：

  • 使用document.querySelectorAll('.add-btn')选中所有添加按钮，通过循环给每个按钮绑定点击事件。
  • 点击时通过event.target.previousElementSibling找到当前按钮对应的商品元素，获取其商品ID。
  • 新增购物车商品计数逻辑：如果商品已在购物车中，只增加数量，避免重复克隆元素（若不需要计数，可直接删除这部分逻辑，保留克隆添加即可）。

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