Javascript中addEventListener绑定onClick点击事件不生效如何解决？

• 变量名不匹配：定义的水果数组名为fruitList，遍历时错误使用了未声明的ListaFrutas，会直接抛出引用错误，阻断后续所有逻辑执行。
• DOM ID拼写错误：HTML中列表的ID为produtos，JS中getElementById错误传入products，导致获取到的DOM元素为null，无法插入水果列表项。
• 事件名格式错误：addEventListener的事件参数无需加on前缀，正确事件名为全小写的click，而非onClick。
• 监听范围不全：querySelector仅会匹配第一个符合.fruits规则的元素，后续插入的其他水果项无法触发点击事件，推荐使用事件委托适配所有动态生成的元素。

修正后代码 #

JS代码 #

window.onload = function() {
    const fruitList = [
        {
            'fruit': 'Banana',
            'price': 3.9
        },
        {
            'fruit': 'Orange',
            'price': 0.7
        }
    ]
    // 修正ID拼写，和HTML保持一致
    const product = document.getElementById('produtos')
    // 修正数组变量名
    fruitList.map((n) => {
        product.insertAdjacentHTML('afterbegin', '<li class="fruits">' + n.fruit + '</li>');
    })

    const shoppingBag = []
    // 给父元素绑定事件，使用事件委托适配所有动态生成的子元素
    product.addEventListener("click", handlerClick)

    function handlerClick(e) {
        // 仅在点击水果项时触发逻辑
        if(e.target.classList.contains('fruits')) {
            console.log('it works')
            // 后续添加到购物袋的逻辑可在此处实现
        }
    }
}

HTML代码（无修改，保持原有即可） #

<div id="content-produtos" class="flex" >
  <ul id="produtos" >
  </ul>
</div>

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