新手开发者求助：如何用JavaScript实现商品添加到购物车功能？

我是一名初级开发者，正在使用HTML、CSS、JavaScript克隆网站，但在实现商品添加到购物车的功能时遇到了问题，以下是我的现有代码：

原JavaScript代码 #

const listProducts = [
    {
        id: 1,
        name: 'Short Pant',
        price: '300.000 VND',
        imageUrl: 'img/1.jpg',
        button: 'Add to Cart'
    },
    {
        id: 2,
        name: 'Long Pant',
        price: '500.000 VND',
        imageUrl: 'img/2.jpg',
        button: 'Add to Cart'
    },
    {
        id: 3,
        name: 'Long Shirt',
        price: '400.000 VND',
        imageUrl: 'img/3.jpg',
        button: 'Add to Cart'
    },
    {
        id: 4,
        name: 'T-Shirt',
        price: '200.000 VND',
        imageUrl: 'img/4.jpg',
        button: 'Add to Cart'
        
    }
];

const product = document.getElementsByClassName("product");

let item = "";
let listItem = item  => {
    for (i = 0; i < listProducts.length; i++) {
    item += `
    <div class="product-item">
      <img src="${listProducts[i].imageUrl}" alt="ảnh" />
      <h2>${listProducts[i].name}</h2>
      <div><span>${listProducts[i].price}</span></div>
      <button class="btn">${listProducts[i].button}</button></div>`
    }
    return item
}

product[0].innerHTML = listItem();

let btnCart = document.getElementsByClassName('btn')
for (j = 0; j < listProducts.length; j++) {
    addEventListener('click', function() {
        this.document.querySelector('.listCart').append(item)
        
    })

原HTML代码 #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      img {
        max-width: 350px;
        height: 350px;
        object-fit: contain;
      }
      .product {
        display: flex;
        justify-content: space-around;
      }
      .product-item {
        border: 1px solid;
        text-align: center;
      }
      h2 {
        border-top: 1px solid black;
        text-align: center;
        margin-top: 50px;
        padding-top: 20px;
      }
    </style>
  </head>
  <body>
    <div class="product"></div>
    <div class="cart">
      <div class="listCart">
        <h2>Cart</h2>
      </div>
    </div>
    <script src="bai10.js"></script>
  </body>
</html>

原代码问题分析 #

• 事件绑定错误：直接调用addEventListener未绑定到具体按钮，循环中也没关联对应商品
• 购物车内容错误：append(item)添加的是所有商品的HTML字符串，不是当前点击的商品
• 变量作用域问题：循环中未用let/const声明i和j，造成全局变量污染
• 函数逻辑混乱：listItem函数参数与外部变量重名，代码可读性差

修正后的JavaScript代码 #

const listProducts = [
    {
        id: 1,
        name: 'Short Pant',
        price: '300.000 VND',
        imageUrl: 'img/1.jpg',
        button: 'Add to Cart'
    },
    {
        id: 2,
        name: 'Long Pant',
        price: '500.000 VND',
        imageUrl: 'img/2.jpg',
        button: 'Add to Cart'
    },
    {
        id: 3,
        name: 'Long Shirt',
        price: '400.000 VND',
        imageUrl: 'img/3.jpg',
        button: 'Add to Cart'
    },
    {
        id: 4,
        name: 'T-Shirt',
        price: '200.000 VND',
        imageUrl: 'img/4.jpg',
        button: 'Add to Cart'
    }
];

const productContainer = document.querySelector(".product");
const listCart = document.querySelector('.listCart');

// 渲染商品列表
function renderProducts() {
    let itemsHtml = "";
    for (let i = 0; i < listProducts.length; i++) {
        const product = listProducts[i];
        itemsHtml += `
        <div class="product-item" data-id="${product.id}">
          <img src="${product.imageUrl}" alt="${product.name}" />
          <h3>${product.name}</h3>
          <div><span>${product.price}</span></div>
          <button class="btn" data-product-id="${product.id}">${product.button}</button>
        </div>`;
    }
    productContainer.innerHTML = itemsHtml;
}

renderProducts();

// 绑定添加到购物车事件（事件委托）
document.addEventListener('click', function(e) {
    if (e.target.classList.contains('btn')) {
        const productId = parseInt(e.target.dataset.productId);
        const selectedProduct = listProducts.find(p => p.id === productId);
        
        // 生成购物车项HTML
        const cartItemHtml = `
        <div class="cart-item">
          <img src="${selectedProduct.imageUrl}" alt="${selectedProduct.name}" style="width: 80px; height: 80px; object-fit: contain;" />
          <div>
            <h4>${selectedProduct.name}</h4>
            <p>${selectedProduct.price}</p>
          </div>
        </div>`;
        
        // 添加到购物车
        listCart.insertAdjacentHTML('beforeend', cartItemHtml);
    }
});

修正后的HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Product Cart Demo</title>
    <style>
        img {
            max-width: 350px;
            height: 350px;
            object-fit: contain;
        }
        .product {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            gap: 20px;
            margin-bottom: 40px;
        }
        .product-item {
            border: 1px solid #ccc;
            padding: 15px;
            text-align: center;
            width: 300px;
        }
        .cart {
            border-top: 1px solid black;
            padding-top: 20px;
        }
        .cart h2 {
            text-align: center;
            margin-top: 0;
            padding-top: 0;
            border: none;
        }
        .cart-item {
            display: flex;
            align-items: center;
            gap: 15px;
            padding: 10px;
            border-bottom: 1px solid #eee;
            margin: 10px 0;
        }
        .btn {
            background-color: #007bff;
            color: white;
            border: none;
            padding: 8px 16px;
            cursor: pointer;
            margin-top: 10px;
        }
        .btn:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    <div class="product"></div>
    <div class="cart">
        <div class="listCart">
            <h2>Cart</h2>
        </div>
    </div>
    <script src="bai10.js"></script>
</body>
</html>

关键修改说明 #

• 事件委托优化：在document上绑定点击事件，避免循环重复绑定，精准识别添加按钮
• 商品数据关联：用data-product-id属性存储商品ID，点击时快速匹配对应商品
• 独立购物车项：为每个点击的商品生成单独的购物车HTML，而非批量添加所有商品
• 变量作用域修正：用let声明循环变量，避免全局污染
• 代码结构优化：将商品渲染封装为独立函数，提升可维护性
• 样式增强：添加购物车项样式，优化视觉体验

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