Estoy tratando de crear una aplicación de lista de tareas sencilla como parte de un tutorial en línea de DevEd, pero me quedo atascado en un error aparentemente desconcertante.
Usando el siguiente marcado HTML:
<div class="todo-container"> <ul class="todo-list"></ul> </div>.. junto con algunos javascript para crear e insertar algunos elementos de la lista, luego estoy usando la siguiente función para filtrar por entradas de la lista de tareas pendientes que tienen una etiqueta de clase específica.
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; } }); } Todo lo anterior parece funcionar bien en conjunto, hasta que agregué CUALQUIER COSA, incluso una línea de comentario entre las etiquetas <ul></ul> como a continuación:
<div class="todo-container"> <ul class="todo-list"> <!-- boo --> </ul> </div>Al hacer esto me sale el siguiente error al intentar filtrar las entradas:
Uncaught TypeError: Cannot read properties of undefined (reading 'contains')¿Alguien puede explicar por favor?
El código completo se encuentra aquí: https://github.com/velopedbyed/vanilla-todo (no es mi repositorio)
childNodes devuelve una colección de, como suena, nodos secundarios. Algunos de estos nodos pueden no ser elementos, sino nodos de texto, y los nodos de texto no tienen la propiedad classList . Por ejemplo:
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 en su lugar, que recuperará solo elementos secundarios.
function filterTodo(e) { [...todoList.children].forEach(function (todo) {