Teoría
Teoría

El evento change

Encontramos todos los elementos de la lista. Cada uno es una tarea y contiene un texto y un campo de tipo checkbox. Esta casilla funciona como un interruptor: si no está marcada, la tarea sigue pendiente; si está marcada, la tarea está completada y podemos eliminarla.

Para trabajar con las tareas, necesitamos detectar cuándo la persona hace clic en una casilla y cambia su estado. Aquí nos servirán los eventos.

Podríamos detectar los clics en toda la tarea, es decir, en todo el elemento <li>. Pero nos interesa saber cuándo cambia el estado de su casilla. Para eso usaremos el evento change.

Este evento se dispara cuando cambia el estado del campo. En una casilla, ocurre tanto al marcarla como al quitarle la marca. En nuestro HTML, el texto está dentro de un label, así que hacer clic en él también activa la casilla.

Todavía no encontramos las casillas dentro de los elementos de la lista. Primero buscaremos la casilla de cada tarea, agregaremos un manejador y mostraremos un mensaje en la consola. Como hay varios elementos, tendremos que repetir estas acciones. Por eso usaremos una función. En este ejercicio la prepararemos y en el siguiente la llamaremos para comprobar el manejador. Ya agregamos la declaración de la función al código.

Si necesitas recordar cómo agregar un manejador, aquí tienes un ejemplo de la sintaxis:

element.addEventListener('change', function () {
  …
});

Para repasar qué significa este código, puedes volver a este ejercicio y a este otro.

Como ya vimos, podemos recorrer en un ciclo los elementos encontrados con querySelectorAll, igual que un arreglo. Este método devuelve una colección de elementos: se parece a un arreglo, pero no lo es. Por eso a veces se les llama «pseudoarreglos». Más adelante veremos sus diferencias. Por ahora basta con recordar que podemos recorrerla con un ciclo. Ya trabajamos con colecciones en el capítulo «JavaScript en el navegador», por ejemplo, en este ejercicio y en este otro.

index.html
style.css
script.js

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Lista de tareas</title> <link href="style.css" rel="stylesheet"> </head> <body> <h1 class="visually-hidden">Lista de tareas</h1> <ul class="todo-list"> <li class="todo-list-item"> <label> <input class="todo-list-input" type="checkbox"> <span>Darle de comer al gato</span> </label> </li> <li class="todo-list-item"> <label> <input class="todo-list-input" type="checkbox"> <span>Irse del país</span> </label> </li> <li class="todo-list-item"> <label> <input class="todo-list-input" type="checkbox"> <span>Darse a la fuga</span> </label> </li> </ul> <p class="empty-tasks hidden">Todas las tareas completadas. No hay tareas nuevas.</p> <form class="add-form" action="https://codigoheroe.com/echo" method="post"> <input class="add-form-input" type="text" aria-label="Descripción de la tarea" placeholder="Por ejemplo, comprar un elefante" required> <button class="add-form-button" type="submit">Agregar tarea</button> </form> <template id="task-template"> <li class="todo-list-item"> <label> <input type="checkbox" class="todo-list-input"> <span></span> </label> </li> </template> <script src="script.js"></script> </body> </html>

CSS

@font-face { font-weight: 400; font-family: "Muller"; font-style: normal; font-display: swap; src: url("Muller.woff") format("woff"); } body { margin: 40px 32px; font-size: 18px; line-height: normal; font-family: "Muller", sans-serif; } .visually-hidden, .todo-list-input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; white-space: nowrap; border: 0; clip: rect(0 0 0 0); clip-path: inset(100%); } .hidden { display: none; } .todo-list { margin: 0; padding: 0; list-style: none; } .todo-list-item { margin-bottom: 12px; } .todo-list-item label { display: block; padding: 12px 18px; background-color: #ffffff; border-radius: 4px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15); cursor: pointer; user-select: none; } .todo-list-item span { display: flex; align-items: center; } .todo-list-input + span::before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 16px; background-color: #ffffff; border: 2px solid #69b253; border-radius: 4px; } .todo-list-input:checked + span::before { background-color: #69b253; background-image: url("check-white.svg"); background-repeat: no-repeat; background-position: center; } .todo-list-input:not(:checked):hover + span::before, .todo-list-input:not(:checked):focus + span::before { background-color: rgba(105, 178, 83, 0.2); } .empty-tasks { color: #69b253; } .empty-tasks::before { content: ""; width: 14px; height: 13px; margin-right: 13px; background-image: url("check-green.svg"); background-repeat: no-repeat; background-position: center; } .add-form { display: flex; } .add-form-input { flex-grow: 1; box-sizing: border-box; height: 46px; margin-right: 16px; padding: 12px; font: inherit; border: 1px solid #a1b5c4; border-radius: 4px; } .add-form-input:focus { border: 1px solid #69b253; outline: none; } .add-form-input:hover { box-shadow: 0 0 6px rgba(105, 178, 83, 0.6); } .add-form-input::placeholder { color: #a1b5c4; } .add-form-button { flex-shrink: 0; padding: 12px; font: inherit; color: #ffffff; background-color: #69b253; border: none; border-radius: 4px; user-select: none; touch-action: manipulation; } .add-form-button:hover, .add-form-button:focus { background-color: #5aa045; outline: none; } .add-form-button:active { background-color: #42862e; }

JavaScript

var list = document.querySelector('.todo-list'); var items = list.querySelectorAll('.todo-list-item'); var addCheckHandler = function (item) { // Agrega el código aquí }; for (var i = 0; i < items.length; i++) { console.log(items[i]); }

ObjetivosRealizado

Dentro de addCheckHandler, crea la variable checkbox y guarda en ella el elemento con la clase todo-list-input. Búscalo dentro de item.
En la siguiente línea, agrega un manejador del evento change a checkbox.
Dentro del manejador, muestra en la consola la cadena '¡Objetivo alcanzado!'.