如何区分绑定同一onclick函数的不同按钮并获取对应商品信息

方法1：通过元素或事件对象获取商品ID #

方式A：传入按钮元素 #

修改HTML中按钮的onclick属性，将当前元素this作为参数传入函数：

<img id = "Hawaiian Shirt 1" onclick = "addToCart(this)" class = "addCartImg" src="assestsForProductsPage/plusSignForCart.jpeg" alt="addCart">

更新JavaScript函数，接收元素并提取ID：

function addToCart(button) {
  const productName = button.id;
  console.log('添加商品：', productName);
  // 后续可根据productName拓展购物车逻辑，比如获取价格、库存等
}

方式B：利用事件对象获取触发元素 #

无需修改现有HTML，直接在函数中通过event.target获取点击的按钮：

function addToCart() {
  const button = event.target;
  const productName = button.id;
  console.log('添加商品：', productName);
}

方法2：遍历DOM获取完整商品信息（更灵活） #

如果需要获取商品价格等更多信息，或者不想依赖按钮ID，可以从按钮向上查找商品容器，提取容器内的信息：

function addToCart() {
  const button = event.target;
  // 找到当前商品的容器节点
  const itemContainer = button.closest('.island-item');
  // 提取商品名称
  const productName = itemContainer.querySelector('center').textContent.trim();
  // 提取价格（去除$符号）
  const price = itemContainer.querySelector('.priceAmount').textContent.trim().replace('$', '');
  
  console.log('添加商品：', productName, '价格：', price);
  // 基于这些信息实现购物车逻辑
}

方法3：事件委托（推荐用于动态商品场景） #

如果商品是动态生成的（比如通过AJAX加载），事件委托更高效，无需给每个按钮单独绑定事件。

首先去掉所有按钮的onclick属性，然后给商品的父容器（可自行添加<div class="items-container">包裹所有.island-item）绑定点击事件：

// 页面加载完成后初始化事件监听
document.addEventListener('DOMContentLoaded', function() {
  // 选择商品父容器，若没有则用document代替
  const itemsContainer = document.querySelector('.items-container');
  itemsContainer.addEventListener('click', function(event) {
    // 判断点击的是加号按钮
    if (event.target.classList.contains('addCartImg')) {
      const button = event.target;
      const itemContainer = button.closest('.island-item');
      const productName = itemContainer.querySelector('center').textContent.trim();
      const price = itemContainer.querySelector('.priceAmount').textContent.trim().replace('$', '');
      
      console.log('添加商品：', productName, '价格：', price);
      // 执行购物车添加逻辑
    }
  });
});

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