javascript - Uncaught TypeError: todo.classList is undefined

Question

I don't understand why this error is shown. I define 3 to 4 functions but all are working properly but when I write this function its through me a error. What could be its cause?

Uncaught TypeError: todo.classList is undefined

function filterTodo(e){
    const todos = todoList.childNodes;
    console.log(todos);
    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";
                }
            case "uncompleted":
                if(!todo.classList.contains("completed")){
                    todo.style.display = "flex";
                } else {
                    todo.style.display = "none";
                }
         }
    });
}

question from:https://stackoverflow.com/questions/65642888/uncaught-typeerror-todo-classlist-is-undefined

Answer 1

classList is a member of Element. todo is the iterator of todos, which was initialized as

const todos = todoList.childNodes;

childNodes is a NodeList, which has Node items inside of it. Node is an interface, one of its implementations is Element. So, the troubling item is a Node, but not an Element. I would find out what it is if I were you. A simple fix would be

todo.classList && todo.classList.contains("completed")

at both occasions, but I would dig deeper to find out what the issue is if I were you.