首页 > 解决方案 > 未捕获的类型错误:myCategories.forEach 不是函数

问题描述

对于一个学校项目,我正在尝试制作一个测验应用程序。进展顺利,但我正在努力寻找一种方法来编写一个允许我选择一个类别并改变它的外观的函数。我很确定我没有做错任何事,但 Firefox 告诉我一些不同的东西......

我的 HTML:

<div id="Category">
   <h2>Kies een categorie</h2>
        <div id="categories">
           <button id="But1" class="catbut">HTML</button>
           <button id="But2" class="catbut">Javascript</button>
           <button id="But3" class="catbut">PHP</button>
           <button id="But4" class="catbut">WordPress</button>
           <button id="But5" class="catbut">MySQL</button>
           <button id="But6" class="catbut">Linux</button>
           <button id="But7" class="catbut">BASH</button>
           <button id="But8" class="catbut">Docker</button> 
        </div>     
 </div>
const myCategories = document.getElementById("categories")

myCategories.forEach((e) => {
  e.addEventListener('click', (e) => {
    let aangeduid = e.target;
    let gekozenCategorie = myCategories ? "catbutSelected" : "catbut";
    aangeduid.parentElement.classList.add(gekozenCategorie);
  });
});

标签: javascripthtml

解决方案


const myCategories = document.getElementById("categories")

这将只得到一个项目,并且 forEach ofc 不存在一个项目。

你需要类似的东西:

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

或拥有更具体的选择器,取决于您的需求,例如“#categories .catbut”或类似


推荐阅读