Cuando construyes un juego como Mokepon, traducir la lógica a código JavaScript implica detectar qué opción eligió el usuario y responder a cada caso, incluyendo cuando no elige nada. Aquí verás cómo usar getElementById, la propiedad checked y la estructura if/else if/else para validar inputs tipo radio y mejorar la experiencia del jugador.

Cómo detecto qué input está seleccionado con getElementById

La estrategia parte de un evento previo: cuando el usuario hace clic en el botón de seleccionar mascota, se dispara la función seleccionarMascotaJugador gracias a un addEventListener. Dentro de esa función necesitas revisar, uno por uno, si cada input tiene la propiedad checked en true.

Una primera versión podría escribir el llamado directamente dentro del if, pero conviene guardar cada elemento en una variable para que el código sea más legible [02:30]:

javascript const inputHipodogue = document.getElementById('hipodogue') const inputCapipepo = document.getElementById('capipepo') const inputRatihuella = document.getElementById('ratihuella')

Con esto, la validación se vuelve directa y otras personas que lean tu archivo entenderán la intención sin esfuerzo.

¿Qué hace la propiedad checked en un input radio? Devuelve true si ese input está marcado por el usuario y false si no lo está. Te permite saber cuál opción eligió el jugador antes de ejecutar lógica adicional.

Cómo encadeno if, else if y else para validar tres mascotas

Con las variables listas, encadenas condicionales para cubrir cada mascota disponible: Hipodogue, Capipepo y Ratihuella. Cada bloque dispara una alerta distinta según cuál input esté marcado [04:45].

javascript function seleccionarMascotaJugador() { if (inputHipodogue.checked) { alert('Seleccionaste a Hipodogue') } else if (inputCapipepo.checked) { alert('Seleccionaste a Capipepo') } else if (inputRatihuella.checked) { alert('Seleccionaste a Ratihuella') } else { alert('Selecciona una mascota') } }

El else if te permite evaluar la siguiente opción solo si la anterior falló, y el else final captura el caso en que ninguna mascota fue elegida. Sin ese último bloque, el botón parecería roto al hacer clic sin seleccionar nada.

Por qué guardar elementos en variables mejora tu código

Escribir document.getElementById('hipodogue').checked directamente dentro del if funciona, pero ensucia la lectura. Al separar la selección del elemento de la validación, ganas claridad y reutilización: si necesitas usar ese input en otra parte de la función, ya lo tienes listo en memoria.

La diferencia parece pequeña en una función, pero cuando repites el patrón decenas de veces en un proyecto, la legibilidad se nota.

Cómo me ayuda el autocompletado de Visual Studio Code

Mientras escribes nombres como inputCapipepo, Visual Studio Code lee tu archivo y te sugiere variables ya declaradas, además de propiedades válidas como checked o children cuando agregas un punto después de la variable [09:10]. Esto no es magia: el editor analiza tu código en tiempo real para ofrecer recomendaciones, y te ayuda a evitar errores de tipeo como escribir Capipe sin la última P.

¿Para qué sirve el bloque else al final de un if? Captura cualquier situación que no cumpla las condiciones anteriores. En este juego, se usa para avisar al usuario que debe seleccionar una mascota antes de continuar.

Cómo manejo el caso en que el usuario no selecciona nada

Un detalle clave de experiencia de usuario: si alguien recarga la página y hace clic en el botón sin marcar ninguna mascota, no debe quedarse sin respuesta. Aunque hayas explicado las instrucciones, el jugador puede pensar que la aplicación está rota.

La solución es agregar un else después del último else if que dispare una alerta clara: Selecciona una mascota. Este patrón ya se había usado en el ejercicio anterior de piedra, papel o tijera, donde un else final atrapaba jugadas inválidas cuando el usuario no escribía piedra, papel ni tijera correctamente [13:20].

Con esto, tu juego responde en los cuatro escenarios posibles:

• Hipodogue seleccionado.
• Capipepo seleccionado.
• Ratihuella seleccionado.
• Ningún input marcado.

Probar cada caso en el navegador es la forma más rápida de confirmar que la lógica responde como esperas. ¿Te animas a agregar una cuarta mascota y ajustar la cadena de condicionales? Cuéntame en los comentarios cómo lo resolverías.