JS点击切换class脚本失效，报addEventListener is not a function错误排查

document.querySelectorAll('.clothes__item-favorite') 返回的是NodeList类数组对象，包含所有匹配类名的DOM元素集合，本身不具备addEventListener方法，只有单个DOM元素才能调用该方法绑定事件，因此直接对集合调用方法就会触发该报错。

根据使用场景二选一即可：

场景1：页面仅存在1个目标圆形元素 #

直接将querySelectorAll替换为querySelector，querySelector会返回匹配的第一个单个DOM元素，修改后的JS代码如下：

const favorite = document.querySelector('.clothes__item-favorite');

favorite.addEventListener('click', function() {
    // 用this指向当前触发点击事件的元素，逻辑更通用
    this.classList.toggle("favorite--active");
});

场景2：后续可能存在多个相同类名的圆形元素 #

遍历querySelectorAll返回的NodeList集合，给每个元素单独绑定点击事件：

const favoriteList = document.querySelectorAll('.clothes__item-favorite');

favoriteList.forEach(item => {
    item.addEventListener('click', function() {
        this.classList.toggle("favorite--active");
    });
});

修改后即可实现需求：点击圆形元素添加favorite--active类变为红色，再次点击移除该类恢复原始白色样式。

内容的提问来源于stack exchange，提问作者Эльшан Намазов