Un botón que existe pero no responde no está roto: simplemente nadie le ha dicho qué hacer. Aprender a usar addEventListener en JavaScript es lo que convierte una página estática en una aplicación interactiva, y es el patrón que vas a leer y escribir durante toda tu vida como desarrollador.
Qué es un evento en JavaScript y por qué lo necesitas
Un evento es cualquier cosa que ocurre en la página: un clic, una tecla presionada, el mouse pasando por encima de un elemento o un formulario enviado. JavaScript puede quedarse esperando a que ocurra algo específico y, cuando sucede, ejecutar una función.
Piénsalo así: es como un guardia de seguridad al que le das instrucciones antes de su turno. No hace nada mientras no pase nada, pero en el momento en que alguien cruza la puerta, sabe exactamente qué hacer. Esa instrucción que le das a JavaScript se llama addEventListener y es la pieza que faltaba para que tu botón de reservar reaccione.
¿Qué es addEventListener? Es un método de JavaScript que permite "escuchar" un evento sobre un elemento del DOM y ejecutar una función cuando ese evento ocurre.
Cómo se escribe la estructura de addEventListener
El patrón es siempre el mismo y por eso vale la pena memorizarlo. Primero seleccionas el elemento con querySelector, después le dices qué evento escuchar y por último defines qué hacer cuando ocurra [02:30].
La estructura básica se ve así:
- Selección del elemento: usas querySelector para encontrar el botón en el DOM.
- Tipo de evento: el primer argumento es un string, por ejemplo click (escrito con CK al final, porque así se escribe en inglés).
- Función callback: el segundo argumento es una función sin nombre que se ejecuta cuando el evento ocurre.
A esa función sin nombre se le llama callback, pero lo que importa ahora no es el término técnico, sino el patrón: selecciona, escucha, actúa.
Un primer ejemplo simple imprime un mensaje en la consola cada vez que alguien hace clic. Al abrir la consola del navegador, cada clic produce una línea nueva y el contador va aumentando. Eso confirma que el listener está funcionando.
Cómo descontar tazas del contador con un evento de clic
Ahora vamos a algo real. En lugar de imprimir en la consola, queremos descontar una taza del contador cada vez que alguien presione el botón reservar, y cuando llegue a cero, deshabilitar el botón.
Para eso actualizamos la función puedeReservar. Antes recibía cantidad y verificaba que no superara dos tazas (esa era la regla del módulo 2, que validaba lo que pedía el usuario). Ahora recibe tazasDisponibles y verifica que quede al menos una, porque estamos modelando otro problema: el agotamiento del stock de 50 tazas al día [05:00].
No es que la versión anterior estuviera mal. En una aplicación real, ambas reglas pueden convivir: una valida la petición del usuario y otra controla el inventario.
Por qué necesitas Number() al leer textContent
Dentro del listener aparece una línea que parece menor pero esconde un bug clásico: Number(contadorTazas.textContent).
¿Por qué usar Number() con textContent? Porque textContent siempre devuelve un string, incluso si lo que ves en pantalla es el número 50. Sin la conversión, JavaScript concatena en lugar de restar.
Si olvidas esa conversión, "50" - 1 no da 49 sino 501, porque JavaScript trata la resta y la concatenación de forma distinta cuando hay strings de por medio. El Number() convierte el texto a número antes de operar. No es cosmético, es la diferencia entre que tu app funcione o se rompa silenciosamente.
Cómo conectar la condición para deshabilitar el botón
Dentro del callback va una estructura if/else. Mientras queden tazas, el contador baja. Cuando llega a cero, el texto del botón cambia a Sin cupos y la reserva se bloquea.
Lo interesante de este momento es lo que está ocurriendo a nivel de arquitectura:
- El HTML define el botón y el contador.
- El CSS les da estilos.
- El JavaScript une las funciones del módulo 2, la manipulación del DOM de la clase anterior y el evento que conecta todo.
Por primera vez en el curso, esos tres mundos trabajan juntos en respuesta a una acción del usuario. Eso es lo que convierte una página en una aplicación.
Cómo leer el patrón querySelector + addEventListener cuando la IA genera código
Cuando la inteligencia artificial te genere código que hace que una página reaccione a algo, vas a ver siempre el mismo patrón: querySelector para encontrar el elemento, addEventListener con el tipo de evento, y una función que se ejecuta cuando ocurre [09:30].
Saber leerlo te permite evaluar si la IA conectó los eventos correctamente o si está escuchando el elemento equivocado. Identifica qué parte selecciona, qué parte escucha y qué parte actúa, y tendrás criterio para corregir cualquier código generado.
Ejercicio práctico para reforzar lo aprendido
Agrega un addEventListener al botón de reservar con esta lógica:
- Cuando se haga clic y todavía haya tazas disponibles, imprime en la consola: Reserva registrada.
- Cuando el contador llegue a cero, imprime: No hay cupos disponibles.
- No cambies el HTML ni el CSS, solo el JavaScript.
Y si terminas rápido, prueba algo: cambia el evento click por dblclick y observa qué ocurre. ¿Qué cambió en el comportamiento? Cuéntame en los comentarios qué descubriste.
