如何在innerHTML插入的内容中通过onclick传递event事件对象

错误原因 #

你的代码报错核心是内联onclick事件中传递事件对象的参数名错误：在原生DOM的内联事件处理逻辑中，全局事件对象的固定关键字是event，你使用e作为参数时浏览器找不到对应变量，因此抛出引用错误。
同时你的代码还存在2处易引发异常的小问题：

• 标签闭合错误：<h5>${element.email}</h3> 标签不匹配，会导致DOM结构渲染异常
• 重复ID问题：循环生成的按钮使用了相同的id="card-button"，DOM规范要求ID全局唯一，会导致后续选择器操作异常

解决方案 #

方案1：直接修改内联事件参数（改动最小） #

只需要把按钮的onclick调用参数从e改为event，同时修正标签闭合错误即可：

function show(data){
 const cardsContainer = document.getElementById('cards-container');
 cardsContainer.innerHTML='';
 data.map(element => {
    const cardDiv = document.createElement('div')
    cardDiv.className= "col-md-4"
    cardDiv.innerHTML=`
    <div class='card p-5 m-1'>
        <h3>${element.name}</h3>
        <h5>${element.email}</h5>
        <button class="btn btn-primary" onclick='setLocalStorage(event)'>Add to Card</button>
    </div>
    `
    cardsContainer.appendChild(cardDiv);
});
}

方案2：使用addEventListener绑定事件（更规范，推荐） #

不用内联事件，直接给生成的DOM节点绑定点击事件，无需考虑全局事件关键字，还可以直接传递当前循环的商品数据，更适合购物车业务场景：

function show(data){
 const cardsContainer = document.getElementById('cards-container');
 cardsContainer.innerHTML='';
 data.map(element => {
    const cardDiv = document.createElement('div')
    cardDiv.className= "col-md-4"
    cardDiv.innerHTML=`
    <div class='card p-5 m-1'>
        <h3>${element.name}</h3>
        <h5>${element.email}</h5>
        <button class="btn btn-primary add-cart-btn">Add to Card</button>
    </div>
    `
    // 绑定点击事件，可直接传递当前商品数据
    cardDiv.querySelector('.add-cart-btn').addEventListener('click', (e) => {
      setLocalStorage(e, element)
    })
    cardsContainer.appendChild(cardDiv);
});
}

// 可直接拿到事件对象和当前商品数据
function setLocalStorage(e, goods){
 console.log("clicked", e, goods)
}

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