Cuando inyectas HTML dinámicamente con JavaScript, es común encontrarte con un error que devuelve null al intentar acceder a un elemento por su ID. Aquí aprenderás por qué ocurre, cómo depurarlo paso a paso y cómo aplicar buenas prácticas de orden en tu código para evitar que tu juego o aplicación se rompa silenciosamente.

Por qué aparece null al buscar un elemento por ID en JavaScript

El problema nace del orden en que el navegador lee el código. Cuando colocas tu archivo de JavaScript al final del HTML, el navegador primero renderiza todos los elementos visibles y al final ejecuta el script de arriba hacia abajo [01:30].

Si una de las primeras líneas de tu JavaScript intenta vincular variables a elementos que aún no existen en el DOM, esas variables guardan el valor null. Eso pasa porque los IDs que buscas se generan después, dentro de una función que se dispara al iniciar el juego.

¿Qué significa null en JavaScript? Es el valor que toma una variable cuando intenta referenciar un elemento que no existe en ese momento. No es un error de sintaxis, es ausencia de dato.

Cómo identificar el error en consola

Al seleccionar un personaje y presionar el botón, la consola lanza un mensaje que indica que el input con checked no existe. La lógica del juego sigue funcionando, los poderes se muestran y puedes ganar o empatar, pero el nombre del personaje seleccionado no aparece. Ese es el síntoma de una referencia rota.

Cómo reorganizar las variables para que encuentren el DOM

La solución consiste en mover las variables al lugar correcto del flujo. Si los elementos HTML se inyectan después, las variables que los referencian deben declararse después también [03:45].

• Quita las tres variables que estaban al inicio del archivo y que usaban const.
• Conviértelas a let para poder reasignarlas más tarde.
• Declara solo el nombre de las variables al inicio, sin asignarles un elemento del DOM todavía.
• Dentro de la función que inyecta el HTML, asigna los getElementById a esas variables ya existentes.

De esta forma, el navegador genera primero los elementos en el HTML y solo después JavaScript los liga con las variables. El orden importa, y aquí viene lo interesante: este patrón es la base para entender cómo funciona el ciclo de vida de los elementos dinámicos en cualquier interfaz.

Por qué usar let en vez de const al reasignar variables

La diferencia es directa. const declara una variable cuyo valor no cambia después de la asignación inicial. let permite reasignar el valor más adelante. Como necesitas declarar la variable arriba y asignarle el elemento del DOM más abajo, let es la opción correcta.

¿Cuándo debo usar let en lugar de const? Usa let cuando vayas a reasignar el valor de una variable después de declararla. Usa const cuando el valor sea fijo desde el inicio.

Cómo evitar errores de tipografía al inyectar IDs dinámicos

Resuelto el primer error, aparece otro. La consola indica que un nuevo ID no coincide. El detalle está en mayúsculas y minúsculas [06:20].

El ID que buscas en el HTML está escrito todo en minúscula, pero el valor que estás inyectando viene de una propiedad del objeto que guarda el nombre con la primera letra en mayúscula. JavaScript distingue mayúsculas de minúsculas, así que mago y Mago son cadenas distintas.

La corrección es ajustar el ID para que coincida exactamente con el formato del nombre almacenado en el objeto. Una letra de diferencia rompe toda la referencia.

Por qué importa tener una sola fuente de verdad

La lección de fondo es estructural. Cuando repites información manualmente en varios lugares del código, multiplicas las oportunidades de error. Un nombre escrito distinto, un ID con tipografía diferente, una propiedad mal copiada, y aparece un bug que parece lógico pero es solo un descuido de escritura.

Usar una sola fuente de verdad significa que la información de tus personajes vive en un único objeto y desde ahí se popula todo lo que el juego necesita: nombres, IDs, poderes, imágenes. Si cambias algo, lo cambias en un solo sitio.

• Reduces errores de tipografía entre archivos.
• Centralizas las actualizaciones futuras.
• Eliminas el código hardcodeado que se vuelve difícil de mantener.

Con esta base, el siguiente paso es reemplazar todo lo que aún está escrito a mano en el juego por referencias directas a los objetos de los personajes. ¿Has identificado en tu propio proyecto cuántos lugares repiten la misma información? Cuéntame en los comentarios cómo lo estás resolviendo.