解决Add to Cart按钮点击内容覆盖问题的JavaScript新手方案

原代码核心问题：每次点击按钮会重新创建购物车容器，且用cart.innerHTML = "xxx"直接覆盖原有内容；事件绑定逻辑混乱，存在重复绑定和冗余代码；HTML中存在重复ID、拼写错误等问题。以下是完整修正方案：

1. 修复HTML错误 #

确保每个元素ID唯一，修正拼写错误，移除按钮上的冗余onclick属性：

<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap" rel="stylesheet">
</head>

<body>
  <div class="all">
    <div class="item_container">
      <div class="itm_img" id="itm_img_1">
        <img src="https://m.media-amazon.com/images/I/61X1b09mK0L._SL1500_.jpg" alt="img" class="img">
      </div>
      <div class="itm_dtl">
        <div class="itm_title">
          <h3>Milton stainless steel Water Bottle, 1 pc, 950 ml, Silver</h3>
        </div>
        <div class="link">
          <a href="https://www.milton.in/">Visit Milton Store</a>
        </div>
        <hr>
        <div class="price">$19</div>
        <div class="btn">
          <button class="btn1" id="btn1">Add to Cart</button>
        </div>
      </div>
    </div>
    <div class="item_container">
      <div class="itm_img" id="itm_img_2">
        <img src="https://m.media-amazon.com/images/I/616G5-FDTvL._SX425_.jpg" alt="img" class="img">
      </div>
      <div class="itm_dtl">
        <div class="itm_title">
          <h3>Milton stainless steel Water Bottle, 1 pc, 950 ml, Silver</h3>
        </div>
        <div class="link">
          <a href="https://www.milton.in/">Visit Milton Store</a>
        </div>
        <hr>
        <div class="price">$19</div>
        <div class="btn">
          <button class="btn2" id="btn2">Add to Cart</button>
        </div>
      </div>
    </div>
    <div class="item_container">
      <div class="itm_img" id="itm_img_3">
        <img src="https://m.media-amazon.com/images/I/61nb1cWMOiL._SX679_.jpg" alt="img" class="img">
      </div>
      <div class="itm_dtl">
        <div class="itm_title">
          <h3>Milton stainless steel Water Bottle, 1 pc, 950 ml, Silver</h3>
        </div>
        <div class="link">
          <a href="https://www.milton.in/">Visit Milton Store</a>
        </div>
        <hr>
        <div class="price">$19</div>
        <div class="btn">
          <button class="btn1" id="btn3">Add to Cart</button>
        </div>
      </div>
    </div>
    <div class="item_container">
      <div class="itm_img" id="itm_img_4">
        <img src="https://m.media-amazon.com/images/I/61TYUKCL2IL._SX679_.jpg" alt="img" class="img">
      </div>
      <div class="itm_dtl">
        <div class="itm_title">
          <h3>Milton stainless steel Water Bottle, 1 pc, 950 ml, Silver</h3>
        </div>
        <div class="link">
          <a href="https://www.milton.in/">Visit Milton Store</a>
        </div>
        <hr>
        <div class="price">$19</div>
        <div class="btn">
          <button class="btn1" id="btn4">Add to Cart</button>
        </div>
      </div>
    </div>
  </div>
</body>

2. 优化JavaScript逻辑 #

实现购物车容器复用、内容追加、统一事件绑定：

document.addEventListener('DOMContentLoaded', function() {
  // 复用购物车容器，不存在则创建
  let cart = document.getElementById('cart');
  if (!cart) {
    cart = document.createElement('div');
    cart.id = 'cart';
    cart.style.cssText = 'color: white; background-color: black; padding: 2%; margin-top: 20px;';
    document.body.appendChild(cart);
  }

  // 绑定所有添加按钮事件
  const addBtns = document.querySelectorAll('.btn button');
  addBtns.forEach(btn => {
    btn.addEventListener('click', function() {
      // 获取当前商品的标题和价格
      const itemTitle = this.closest('.item_container').querySelector('.itm_title h3').textContent.trim();
      const itemPrice = this.closest('.item_container').querySelector('.price').textContent.trim();
      
      // 追加商品到购物车，不覆盖原有内容
      cart.innerHTML += `<div class="cart-item">${itemTitle} - ${itemPrice}</div>`;
    });
  });
});

3. 补充CSS样式（可选） #

为购物车项添加样式，提升可读性：

.all {
  display: flex;
  flex-wrap: wrap;
}
.item_container {
  display: flex;
  flex-direction: column;
  background-color: #ffcccc;
  width: 250px;
  border-radius: 6px;
  box-shadow: 10px 10px 30px;
  align-items: center;
  margin: 5%;
}
.itm_img  {
  padding: 2%;
}
.img {
  width: 200px;
  border-radius: 5px;
}
.itm_title {
  text-align: center;
}
h3 {
  font-family: 'Roboto', sans-serif;
  margin-bottom: 0%;
}
a:link {
  color: #99ddff;
  text-decoration: none;
}
a:visited {
  color: green;
}
a:hover {
  text-decoration: underline;
}
a:active {
  color: #99ddff;
}
.price {
  font-weight: bold;
  font-size: 25px;
  font-family: 'Roboto', sans-serif;
  text-align: center;
}
.link {
  text-align: center;
}
hr {
  margin: 4%;
}
.btn {
  margin-left: 32%;
  margin-top: 5%;
  margin-bottom: 6%;
}
.btn1, .btn2 {
  background-color: #80ffcc;
  border: none;
  padding: 5%;
  border-radius: 6px;
}
.btn1:hover, .btn2:hover {
  background-color: #80e5ff;
  transition: 0.5s;
  box-shadow: 5px 5px 10px;
}
#itemshow {
  display: none;
}

.cart-item {
  padding: 8px 0;
  border-bottom: 1px solid #444;
}

核心修改说明 #

• 避免内容覆盖：用cart.innerHTML +=替代直接赋值，实现商品追加
• 复用容器：仅在购物车不存在时创建，避免重复生成多个容器
• 统一事件绑定：通过遍历批量绑定按钮事件，减少冗余代码
• 修复HTML问题：修正拼写错误、重复ID等基础错误

内容的提问来源于stack exchange，提问作者Pentakota Lalith Prasad