DOM y Eventos

Un evento debe localizar el elemento relacionado y actualizar el modelo sin depender de una posición fija. En este ejemplo, cada botón lleva un identificador mediante data-id; así, reordenar la lista no cambia la tarea afectada. La interfaz y el array deben seguir la misma decisión.

Ejemplo resuelto

<button data-id="b2">Completar Enviar</button>
<button data-id="c3">Completar Leer</button>
<script>
  const tareas = [
    { id: "b2", titulo: "Enviar", completada: false },
    { id: "c3", titulo: "Leer", completada: false }
  ];
  document.querySelectorAll("button[data-id]").forEach((boton) => {
    boton.addEventListener("click", (evento) => {
      const tarea = tareas.find(item => item.id === evento.currentTarget.dataset.id);
      if (!tarea) return;
      tarea.completada = true;
      evento.currentTarget.textContent = `Completada: ${tarea.titulo}`;
      console.log(tarea.titulo, tarea.completada);
    });
  });
</script>

Pruébalo

1. Comprueba los dos registros y sus identificadores distintos.

2. Observa que cada botón se registra con su propio manejador.

3. Pulsa el segundo botón y observa qué objeto cambia.

4. Reordena el array y repite.

Error frecuente: usar el índice capturado antes de reordenar. Corrige buscando por un identificador estable.

Comprueba tu resultado

Al pulsar el botón de b2, solo la tarea Enviar debe pasar a true, incluso después de cambiar el orden. La consola debe mostrar Enviar true.

El código vincula los botones existentes al cargar el script. Si creas botones después, registra también sus eventos o usa delegación en un contenedor estable. Prueba Tab y Enter: el botón nativo debe activar la misma transición; tras completarlo, el texto visible debe coincidir con su objeto.