Cuando importas un script en el head de tu HTML, JavaScript intenta ejecutarse antes de que el navegador termine de leer la página, y eso provoca errores al seleccionar elementos que aún no existen. La solución elegante es escuchar el evento load del objeto window para ejecutar tu código solo cuando todo el HTML ya cargó.
¿Por qué falla un script cargado en el head?
Si pones el script arriba del HTML, el navegador lo ejecuta antes de renderizar los botones, inputs y demás elementos. Cuando intentas seleccionar un elemento con document.getElementById, ese elemento todavía no existe en el DOM y obtienes un error. Una salida es mover el script al final del body, pero hay un camino más limpio.
¿Qué hace window.addEventListener con load? Ejecuta una función justo cuando el navegador termina de cargar todo el HTML, sin importar dónde esté ubicado tu script.
¿Cómo escuchar el evento load del navegador?
En lugar de asociar el listener a un botón, lo asocias al objeto window, que representa al navegador. Le pides que escuche el evento load y le pasas la función que quieres disparar [02:00].
javascript
window.addEventListener('load', iniciarJuego);
function iniciarJuego() {
const botonMascotaJugador = document.getElementById('btnMascotaJugador');
botonMascotaJugador.addEventListener('click', seleccionarMascotaJugador);
}
Dentro de iniciarJuego colocas todo lo que necesita el DOM ya construido: la selección de elementos con getElementById y la asignación de eventos de clic. Así, aunque el script siga en el head, el código se ejecuta en el momento correcto.
¿Qué cambia al usar el evento load frente a mover el script?
Mover el script al final del body también funciona, pero usar load te da control explícito sobre cuándo arranca tu lógica. Tu archivo JavaScript queda lleno de funciones que no se ejecutan hasta que el navegador te avisa que todo está listo.
¿Cómo saber qué input de tipo radio fue seleccionado?
El HTML del juego tiene tres inputs tipo radio: Hipodogue, Capipepo y Ratihuella. Cada input HTML tiene una propiedad llamada checked que devuelve true si está seleccionado y false si no [07:30].
javascript
document.getElementById('hipodogue').checked; // true o false
Si seleccionas Hipodogue en pantalla y consultas su propiedad checked, obtienes true. Si seleccionas otra mascota, ese mismo input devuelve false. Esa es la pista que necesitas para saber qué eligió el jugador.
¿Qué significa la propiedad checked en un input radio? Es un valor booleano que indica si ese input está marcado por el usuario en ese momento.
¿Cómo validar tres opciones con if, else if?
Cuando el jugador hace clic en el botón de seleccionar mascota, necesitas revisar uno por uno los tres inputs y descubrir cuál tiene checked en true. La estructura adecuada es un encadenamiento de condicionales.
- Primer
if: revisa si inputUno.checked es verdadero. Si lo es, la mascota es Hipodogue.
- Primer
else if: si el anterior fue falso, revisa si inputDos.checked es verdadero. Si lo es, la mascota es Capipepo.
- Segundo
else if: si los dos anteriores fueron falsos, revisa si inputTres.checked es verdadero. Si lo es, la mascota es Ratihuella.
Esta cadena garantiza que solo entres a un bloque, porque los radios mutuamente excluyentes solo permiten una selección a la vez. La lógica vive dentro de la función seleccionarMascotaJugador, que se dispara con el clic.
¿Por qué usar else if y no tres if separados?
Usar else if evita evaluaciones innecesarias. Una vez que encuentras el input marcado, el resto se ignora. Si usaras tres if independientes, el navegador revisaría las tres condiciones aunque ya tuvieras la respuesta.
Conceptos clave del flujo del juego
El flujo completo combina varias piezas que vale la pena nombrar con precisión.
- window.addEventListener('load', ...): registra una función para que se ejecute cuando todo el HTML ya cargó [01:30].
- document.getElementById: selecciona un elemento del DOM por su atributo
id [04:50].
- propiedad checked: booleano que indica si un input tipo radio o checkbox está seleccionado [08:00].
- función iniciarJuego: agrupa la selección de elementos y la asignación de listeners para ejecutarla en el momento correcto [03:30].
- encadenamiento if, else if, else if: estructura para validar opciones mutuamente excluyentes [11:00].
Con esta base, tu archivo JavaScript ya no ejecuta nada por sí solo: solo define funciones y espera la señal del navegador. Cuando llega el evento load, arranca iniciarJuego, que conecta el botón con seleccionarMascotaJugador, y dentro de esa función decidirás qué mascota eligió el jugador con los condicionales.
¿Ya tienes claro cómo traducir esta lógica a código? Cuéntame en los comentarios cómo resolverías la validación de los tres inputs antes de ver la siguiente clase.
