Cuando programas un juego en JavaScript, no basta con saber qué eligió el jugador: necesitas mostrarlo en pantalla. Aquí aprendes a manipular el DOM con innerHTML para actualizar el HTML dinámicamente según las decisiones del usuario, una habilidad esencial para cualquier desarrollador web principiante.
Por qué necesitas manipular el DOM en un juego con JavaScript
Después de validar la mascota seleccionada con condicionales, el siguiente paso es comunicárselo al jugador en la interfaz. Lanzar un alert funciona para depurar, pero no construye experiencia de juego. Lo que buscas es que el HTML refleje la elección sin recargar la página.
El DOM (Document Object Model) es la representación que el navegador hace de tu HTML, y JavaScript puede leerlo y modificarlo en tiempo real. Esa capacidad es la que convierte una página estática en una aplicación interactiva.
¿Qué es manipular el DOM? Es usar JavaScript para leer, cambiar o actualizar elementos HTML sin recargar la página. Por ejemplo, cambiar el texto dentro de un <span> cuando el usuario hace clic en un botón.
Cómo preparar tu HTML para recibir contenido dinámico
Antes de tocar JavaScript, tu HTML debe estar listo para ser modificado. La técnica consiste en envolver el contenido que vas a cambiar dentro de una etiqueta span con un id único. Ese id es la dirección que JavaScript usará para ubicar el elemento [02:30].
En el juego, el párrafo que dice tu mascota tiene tantas vidas necesita dos span: uno vacío para el nombre de la mascota del jugador y otro para las vidas. Al primero le asignas id="mascota-jugador" y, replicando la estructura para el rival, creas otro con id="mascota-enemigo".
Por qué dejar el span vacío al inicio
Dejar el span sin contenido inicial tiene una razón práctica: el nombre lo decide el jugador en tiempo de ejecución. Si lo precargas con Ratihuella, tendrías que borrarlo después. Mejor lo dejas vacío y lo llenas cuando el condicional sepa qué eligió el usuario.
Qué es innerHTML y cómo se usa para cambiar contenido
La propiedad innerHTML te permite leer o sobrescribir todo el HTML que vive dentro de un elemento. Es uno de los métodos de manipulación del DOM más usados por su simplicidad. La documentación oficial está en MDN Web Docs, una referencia que vale la pena tener abierta cuando programas [04:50].
El flujo es directo:
- Seleccionas el elemento con
document.getElementById("id-del-elemento").
- Guardas esa referencia en una variable, por ejemplo
spanMascotaJugador.
- Asignas un nuevo valor con
spanMascotaJugador.innerHTML = "Hipodoge".
En cuanto se ejecuta esa línea, el texto dentro del span cambia en pantalla sin recargar nada. Puedes hacerlo tantas veces como quieras dentro de la misma sesión.
¿Para qué sirve document.getElementById? Sirve para que JavaScript localice un elemento HTML específico usando el valor de su atributo id. Devuelve una referencia que puedes guardar en una variable y manipular después.
Cómo probar innerHTML desde la consola del navegador
Una forma rápida de entender innerHTML es abrir la consola del navegador y escribir manualmente document.getElementById("mascota-jugador").innerHTML = "Capipepo". Verás cómo el texto cambia al instante. Si vuelves a ejecutar la línea con Hipodoge, vuelve a cambiar. Esa es la esencia de la manipulación dinámica.
Cómo integrar innerHTML en los condicionales del juego
El paso final es reemplazar las alertas de cada condicional por una asignación a innerHTML. Dentro de la función seleccionarMascotaJugador, después de detectar qué radio button está marcado, escribes:
javascript
let spanMascotaJugador = document.getElementById("mascota-jugador");
if (inputHipodoge.checked) {
spanMascotaJugador.innerHTML = "Hipodoge";
} else if (inputCapipepo.checked) {
spanMascotaJugador.innerHTML = "Capipepo";
} else if (inputRatigueya.checked) {
spanMascotaJugador.innerHTML = "Ratigueya";
} else {
alert("Por favor, selecciona una mascota");
}
Con ese cambio, al hacer clic en el botón de seleccionar, el nombre de la mascota aparece automáticamente en el párrafo informativo. Si el jugador no elige ninguna, se mantiene la alerta de validación.
Por qué la documentación de MDN es tu mejor aliada
MDN Web Docs es la documentación oficial mantenida por Mozilla y la comunidad. Cuando buscas algo como innerHTML en Google, el primer resultado suele ser MDN, y por buena razón: ofrece resumen, sintaxis, ejemplos, advertencias de seguridad y casos de uso [05:20].
Usar documentación no es señal de que no sepas programar; es exactamente lo contrario. Los desarrolladores profesionales viven consultando referencias porque la cantidad de métodos, propiedades y APIs es enorme. Aprender a leer documentación es una habilidad tan importante como escribir código.
Algunas alternativas a innerHTML que puedes explorar más adelante son textContent (más seguro cuando solo manejas texto) y innerText (sensible a estilos CSS). Cada una tiene su momento, y la documentación te ayuda a elegir.
¿Ya probaste cambiar el contenido de tu propio HTML con innerHTML? Cuéntame en los comentarios qué elemento manipulaste primero y si encontraste alguna diferencia entre usar innerHTML y textContent.
