如何在JavaScript中给HTML onclick传递动态参数？传对象遇语法错误

问题根源 #

你遇到的错误是因为JSON.stringify生成的字符串包含双引号，和HTML onclick属性的双引号发生嵌套冲突。比如onclick="addToCart({"name":"xxx"})"中，JSON里的第一个双引号会直接闭合onclick的属性值，剩下的内容变成无效语法，触发「unexpected end of input」错误。

临时修复方案（针对内联事件） #

将JSON字符串中的双引号替换为HTML实体"，避免和onclick属性的双引号冲突：

function populateProductsToHomepage() {
  let divToPopulate = '';
  const {products} = apiResponse;
  products.forEach((product, i) => {
    if (product.type === 'featured') {
      // 替换JSON中的双引号为HTML实体
      const stringifiedProduct = JSON.stringify(product).replace(/"/g, '"');
      divToPopulate += `<div
      class="col-md-6 col-lg-4 p-1 best"
      id="${product._id}"
      onclick="storeIdInLocalStorage(this)"
    >
      <a href="singleproduct.html" class="text-decoration-none text-dark">
        <div class="collection-img">
          <img src="${product.images[0]}" class="" width="100%" alt="" />
        </div>
        <div class="text-center">
          <p class="fw-bold text-capitalize my-1 text-start">${product.name}</p>
          <p class="fw-normal text-end">PKR ${product.price}</p>
          <p class="fw-light text-start">${product.shortDescription}</p>
          <a class="btn btn-primary mt-3" data-toggle="modal" data-target="#exampleModalCenter" onclick="addToCart(${stringifiedProduct})">Add to Cart</a>
        </div>
      </a>
    </div>`;
    }
  });
  document.getElementById('homepageProductsContainer').innerHTML = divToPopulate;
}

替换后，HTML解析时会把"转回双引号，保证JSON字符串能完整传递给addToCart函数。

更优解决方案：事件委托（推荐） #

内联事件容易引发语法冲突、不易维护，更推荐使用事件委托处理动态元素的点击事件：

1. 动态生成元素时，给按钮添加自定义属性存储产品JSON（用单引号包裹避免双引号冲突）；
2. 给容器添加全局点击监听，识别按钮并解析数据调用函数。

function populateProductsToHomepage() {
  let divToPopulate = '';
  const {products} = apiResponse;
  products.forEach((product, i) => {
    if (product.type === 'featured') {
      const stringifiedProduct = JSON.stringify(product);
      divToPopulate += `<div
      class="col-md-6 col-lg-4 p-1 best"
      id="${product._id}"
      onclick="storeIdInLocalStorage(this)"
    >
      <a href="singleproduct.html" class="text-decoration-none text-dark">
        <div class="collection-img">
          <img src="${product.images[0]}" class="" width="100%" alt="" />
        </div>
        <div class="text-center">
          <p class="fw-bold text-capitalize my-1 text-start">${product.name}</p>
          <p class="fw-normal text-end">PKR ${product.price}</p>
          <p class="fw-light text-start">${product.shortDescription}</p>
          <!-- 添加自定义属性存储产品数据，用单引号包裹 -->
          <a class="btn btn-primary mt-3 add-to-cart-btn" data-toggle="modal" data-target="#exampleModalCenter" data-product='${stringifiedProduct}'>Add to Cart</a>
        </div>
      </a>
    </div>`;
    }
  });
  document.getElementById('homepageProductsContainer').innerHTML = divToPopulate;
}

// 给容器添加事件委托
document.getElementById('homepageProductsContainer').addEventListener('click', function(e) {
  // 找到点击的Add to Cart按钮
  const targetBtn = e.target.closest('.add-to-cart-btn');
  if (targetBtn) {
    // 解析自定义属性中的产品数据
    const product = JSON.parse(targetBtn.dataset.product);
    // 调用添加购物车函数
    addToCart(product);
  }
});

事件委托的优势 #

• 避免内联事件的语法冲突问题
• 统一管理事件逻辑，代码更易维护
• 动态新增的元素无需单独绑定事件，监听自动生效

内容的提问来源于stack exchange，提问作者Abdul Hanan Asif