Soy un principiante que crea una aplicación de lista de tareas pendientes en Vanilla JS. Estoy tratando de crear una función que filtre a través de los elementos de tareas pendientes y muestre los elementos que están completos, incompletos o Todas las tareas, pero me encuentro con el error
task.style no está definido"
const filterTask = document.querySelector('.filter-options'); //select tag in HTML which allows user to select whether they want to display the completed or in-completed task const todoUl = document.querySelector('.todo-ul'); //the ul under which the tasks become childNodes filterTask.addEventListener('click', filterTodo) function filterTodo(e) { const tasks = todoUl.childNodes; tasks.forEach((task) => { switch (e.target.value) { case "all-task": task.style.display = "flex"; break; case "completed-task": if (task.classList.contains('completed-task')) { task.style.display = "flex"; } else { task.style.display = "none"; } } }) <select class="filter-options"> <option value="all-task">All Task</option> <option value="completed-task">Completed Task</option> <option value="uncompleted-task">Uncompleted Task</option> </select>childNodes devuelve NodeList que es una colección de nodos. El problema aquí es que esta colección contiene no solo Element sino también nodos de Text . El nodo de Text no tiene propiedad de style , por lo tanto, no está undefined .
En lugar de usar childNodes , use children que devuelve solo Element s.
La diferencia entre childNodes y children .
const ul = document.querySelector('ul'); const childNodes = [...ul.childNodes].map(node => node.nodeName); const children = [...ul.children].map(node => node.nodeName); console.log(`childNodes nodes [${childNodes.join()}]`); console.log(`children nodes [${children.join()}]`); <ul> <li>foo</li> </ul>