JS求助：如何获取点击的单个商品而非整个商品数组？

我希望点击商品对应的购买按钮时，仅获取该单个商品的信息，但目前点击后会直接获取整个商品数组。尝试使用event.target.id但未成功，以下是我的JS和HTML代码：

我的JS代码 #

const shopContainer = document.querySelector(".shop-content");

let productTitle;
let productDescription;
let productImage;
let productPrice;
let productCategory;
let productId;
let productKey = [];
let productArray = [];

let output = "";

const url = "https://fakestoreapi.com/products";

let data = fetch(url)
  .then((res) => res.json())
  .then((data) => {
    for (let i = 0; i < data.length; i++) {
      productTitle = data[i].title;
      productDescription = data[i].description;
      productImage = data[i].image;
      productPrice = data[i].price;
      productCategory = data[i].category;
      productId = data[i].id;
      productArray[i] = [
        productTitle,
        productDescription,
        productImage,
        productPrice,
        productCategory,
        productId,
      ];
      productKey[i] = data[i].id;
      localStorage.setItem(productKey[i], JSON.stringify(productArray[i]));
    }
    showApi();
    console.log(productArray)
  });

console.log(localStorage)

function showApi() {
  for (let i = 0; i < productArray.length; i++) {
    output += `
              <div class="product-box">
              <img class="product" src="${productArray[i][2]}" alt="product image">
              <h2 class="product-title">${productArray[i][0]}</h2>
                  <div class="bottom-box">
                  <span class="price">${productArray[i][3]}$</span>
                  <i class='bx bx-shopping-bag add-cart' id="${i}" onclick="returnKey()"></i>
                  </div>
                </div>
          `;
  }
  shopContainer.innerHTML = output;
  console.log(productArray);
};

let knapp = document.getElementsByClassName("bx bx-shopping-bag");

console.log(knapp);

let inputCart = document.querySelector(".inputCart")

function returnKey() {
  if (localStorage.length !== 0){
    Object.keys(localStorage).forEach(function (key){
    object = JSON.parse(localStorage.getItem(key))
    completeProduct = (object)

    let cartPrice = document.createElement("p");
    let cartTitle = document.createElement("p");
    let cartImage = document.createElement("img");
    inputCart.appendChild(cartPrice);
    inputCart.appendChild(cartImage);
    inputCart.appendChild(cartTitle);
    
    cartTitle.setAttribute("class", "cart-title")
    cartImage.setAttribute("src", completeProduct[2]);
    cartImage.setAttribute("width", "75");
    cartImage.setAttribute("height", "75");

    cartTitle.innerHTML = completeProduct[0];
    cartPrice.innerHTML = ("$" + completeProduct[3]);
  })
  inputCart.innerHTML = cartTitle;
  }
};

let removeBtn = document.getElementById("removebutton").addEventListener('click', clearCart);
let buyBtn = document.getElementById("buyBtn").addEventListener('click', buyCart);

function clearCart() {
  removeCart = window.confirm("Are you sure you want to clear your cart?");
  if (removeCart) {
    inputCart.innerHTML = "";
  }
}

function buyCart() {
    shopMore = window.confirm("Are you finished shopping?");
  if (shopMore) {
    alert("Thank your for shopping at CatchShop!");
    window.location.reload();
  }
}
       
let cartIcon = document.querySelector("#cart-icon");
let cart = document.querySelector(".cart");
let closeCart = document.querySelector("#close-cart");

cartIcon.onclick = () => {
  cart.classList.add("active");
};

closeCart.onclick = () => {
  cart.classList.remove("active");
};

let filterBtn = document.querySelector("#filter-button");
let filterContainer = document.querySelector(".filter-container");
let closeFilter = document.querySelector("#close-filterbox");

filterBtn.onclick = () => {
  filterContainer.classList.add("active");
};
closeFilter.onclick = () => {
  filterContainer.classList.remove("active");
};

我的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">
  <link rel="stylesheet" href="assets/css/style.css">
  <link href="https://fonts.googleapis.com/css2?family=Quicksand&family=Roboto&display=swap" rel="stylesheet">
  <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
  <link rel="icon" href="./assets/images/android-chrome-192x192.png">
  <title>CatchShop</title>
</head>

<body>
  <header>
    <div class="nav container">
      <a href="index.html" class="logo">CatchShop</a>
      <a href="about.html">Contact</a>
      <a href="contact.html">About us</a>
      <i class='bx bxs-shopping-bag' id="cart-icon"></i>
      <div class="cart">
        <img class="companylogo" src="./assets/images/android-chrome-192x192.png" alt="logo">
        <h2 class="yourcart">Your Cart</h2>
        <i class='bx bx-x' id="close-cart"></i>
        <div class="inputCart"></div>
        <i class='bx bxs-trash-alt cart-remove' id="removebutton"></i>
        <button type="button" class="btn-buy" id="buyBtn">Buy now</button>
      </div>
    </div>
  </header>
  <section class="shop container">
    <div class="shop-content">
    </div>
  </section>
 <div id="showCars"></div>
  <footer>
    <div class="companyname">
      <a href="#" class="logo">CatchShop</a>
      <img class="footerlogo" src="./assets/images/android-chrome-192x192.png" alt="logo">
    </div>
    <div class="social-media">
      <a href="https://twitter.com/"><i class='bx bxl-twitter' id="social-media-icon"></i></a>
      <a href="https://www.instagram.com/"><i class='bx bxl-facebook' id="social-media-icon"></i></a>
      <a href="https://www.facebook.com/"><i class='bx bxl-instagram' id="social-media-icon"></i></a>
    </div>
  </footer>
  <script src="./assets/js/store.js"></script>
  <script src="./assets/js/main.js"></script>
</body>

</html>

问题修复方案 #

核心问题 #

当前returnKey()函数遍历了localStorage所有键，导致每次点击都添加全部商品；且点击事件未传递当前商品的唯一标识，无法定位单个商品。

1. 修改按钮点击事件，传递商品索引 #

在生成商品按钮时，把当前商品的索引传给returnKey函数：

function showApi() {
  for (let i = 0; i < productArray.length; i++) {
    output += `
              <div class="product-box">
              <img class="product" src="${productArray[i][2]}" alt="product image">
              <h2 class="product-title">${productArray[i][0]}</h2>
                  <div class="bottom-box">
                  <span class="price">${productArray[i][3]}$</span>
                  <i class='bx bx-shopping-bag add-cart' id="${i}" onclick="returnKey(${i})"></i>
                  </div>
                </div>
          `;
  }
  shopContainer.innerHTML = output;
};

2. 重写returnKey函数，仅处理单个商品 #

修改函数接收索引参数，直接获取对应商品信息添加到购物车，不再遍历全部存储内容：

function returnKey(index) {
  // 直接从数组获取对应商品（也可从localStorage读取）
  const completeProduct = productArray[index];

  // 创建商品元素容器
  const cartItem = document.createElement("div");
  
  // 创建商品各元素
  let cartPrice = document.createElement("p");
  let cartTitle = document.createElement("p");
  let cartImage = document.createElement("img");
  
  // 设置元素属性和内容
  cartTitle.className = "cart-title";
  cartImage.src = completeProduct[2];
  cartImage.width = 75;
  cartImage.height = 75;
  cartTitle.textContent = completeProduct[0];
  cartPrice.textContent = `$${completeProduct[3]}`;

  // 组装元素并添加到购物车
  cartItem.appendChild(cartImage);
  cartItem.appendChild(cartTitle);
  cartItem.appendChild(cartPrice);
  inputCart.appendChild(cartItem);
};

3. 移除错误覆盖代码 #

删除原函数里的inputCart.innerHTML = cartTitle;，这行代码会清空购物车仅保留最后一个商品标题。

4. 可选：用商品ID替代数组索引（更稳定） #

如果担心数组顺序变化导致索引失效，可以用商品ID作为标识：

// 生成按钮时用商品ID作为参数
output += `
  <i class='bx bx-shopping-bag add-cart' id="${data[i].id}" onclick="returnKey(${data[i].id})"></i>
`;

// 修改returnKey函数通过ID获取商品
function returnKey(productId) {
  const completeProduct = JSON.parse(localStorage.getItem(productId));
  // 后续元素创建逻辑同上
}

修改完成后，点击单个商品的购买按钮就只会添加该商品到购物车，不会再出现一次性添加全部商品的问题。

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