Hello y'all,
I want to coding filtering in javascript but i have an error (Uncaught TypeError: todos.forEach is not a function) that i don't understand. How can i fix it ?
const todoFilter = document.querySelector('.todoFilter');
todoFilter.addEventListener("click", deneme);
function deneme(e) {
const todos = todoField.children;
todos.forEach(element => {
if (e.target.value = "all") {
element.style.display = 'flex';
} else if (e.target.value = "completed") {
element.style.display = 'flex';
} else {
element.style.display = 'none';
}
});
}<section class="addField">
<form>
<div class="select">
<select name="options" class="todoFilter">
<option value="all">All</option>
<option value="completed">Completed</option>
<option value="deleted">Deleted</option>
</select>
</div>
</form>
</section>
<section class="todolist">
<ul class="todos">
<div class="todo">
<li>1</li>
<button class="completeButton">Complete</button>
<button class="deleteButton">Delete</button>
</div>
<div class="todo completed">
<li>2</li>
<button class="completeButton">Complete</button>
<button class="deleteButton">Delete</button>
</div>
</ul>
</section>The children property returns an HTMLCollection which does not have a forEach method.
A solution could be to use a normal for loop:
for(const child of children) { ... }
Or convert it to an array first:
const todos = [...todoField.children]