I'm trying to create a simple todo list app as part of an online tutorial by DevEd, but am getting stuck on one seemingly puzzleing error.
Using the following HTML markup:
<div class="todo-container">
<ul class="todo-list"></ul>
</div>
.. alongside some javascript to create and insert some list elements, I'm then using the following function to filter by todo list entries that have a specific class tag.
function filterTodo(e) {
const todos = todoList.childNodes;
todos.forEach(function (todo) {
switch (e.target.value) {
case "all":
todo.style.display = "flex";
break;
case "completed":
if (todo.classList.contains("completed")) {
todo.style.display = "flex";
} else {
todo.style.display = "none";
}
break;
}
});
}
All the above seem to work together fine, until I added ANYTHING, even a comment line in between the <ul></ul> tags like below:
<div class="todo-container">
<ul class="todo-list">
<!-- boo -->
</ul>
</div>
Upon doing this I get the following error when trying to filter the entries:
Uncaught TypeError: Cannot read properties of undefined (reading 'contains')
Can anyone please explain?
Full code found here: https://github.com/developedbyed/vanilla-todo (not my repo)
childNodes returns a collection of - as it sounds like - child nodes. Some of these nodes may not be elements, but text nodes - and text nodes have no classList property. For example:
const childNodes = document.querySelector('.container').childNodes;
console.log(childNodes[0].classList);
console.log(childNodes[1].classList);<div class="container">text node<span>element</span></div>Use .children instead, which will retrieve only child elements.
function filterTodo(e) {
[...todoList.children].forEach(function (todo) {