未捕获的类型错误:myCategories.forEach不是一个函数

Question

对于一个学校项目，我想做一个测验应用程序。这有点顺利，但我正在努力写一个函数，允许我选择一个类别，并改变它的外观。我很确定我没有做错什么，但是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);
});
});

Answer 1

const myCategories = document.getElementById("categories")

这将只获取一个项目，并且对于一个项目不存在forEach ofc。

你需要这样写:

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

或者有一个更具体的选择器，这取决于你的需要，比如"#categories .catbut"或类似

Answer 2

可以使用

获取项目数组

const myCategories = document.getElementsByClassName("catbut");

将选择所有类为"catbut"的项

https://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp