开发测验APP报myCategories.forEach is not a function错误如何解决

• document.getElementById() 方法仅会返回匹配指定ID的单个DOM元素对象，该对象本身不内置forEach遍历方法，直接调用该方法就会抛出此类型错误。
• 你的代码目标是为容器下所有分类按钮绑定点击事件，需要先获取所有按钮的可迭代节点集合，而非外层容器元素。
• 原代码的事件回调逻辑也存在问题：三元判断myCategories ? "catbutSelected" : "catbut"无实际意义（myCategories永远为真），且错误地给按钮父容器添加样式类，也未处理其他按钮的选中状态清空逻辑。

1. 修正元素获取逻辑 #

使用querySelectorAll()获取所有分类按钮的NodeList集合，该集合原生支持forEach遍历：

// 直接通过类名选择所有分类按钮
const myCategories = document.querySelectorAll(".catbut")

如果需要兼容不支持NodeList遍历的旧版本浏览器，可以将集合转为数组：

const myCategories = Array.from(document.querySelectorAll(".catbut"))

2. 修正完整逻辑代码 #

const myCategories = document.querySelectorAll(".catbut")

myCategories.forEach(btn => {
  btn.addEventListener('click', (e) => {
    // 先清空所有按钮的选中状态
    myCategories.forEach(item => item.classList.remove("catbutSelected"))
    // 给当前点击的按钮添加选中样式
    e.target.classList.add("catbutSelected")
    // 如需获取选中的分类值，可通过e.target.innerText拿到对应分类名
  })
})

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