Renderizar botones de ataque dinámicamente en JavaScript te permite construir interfaces que reaccionan al personaje que el usuario elige. Aquí verás cómo crear la función mostrarAtaques usando forEach, innerHTML y manejo correcto del orden de declaración de variables para evitar errores de referencias nulas.

¿Cómo construir la función mostrarAtaques con forEach?

La función recibe el arreglo de ataques del personaje seleccionado y lo recorre para generar un botón por cada ataque. Para que esto funcione, necesitas un contenedor en el HTML con un id claro, por ejemplo contenedorAtaques, que servirá como punto de inyección.

Dentro de la función, recorres el arreglo con forEach, y por cada ataque construyes una estructura HTML que toma dos propiedades del objeto: ataque.id para identificar el botón y ataque.nombre para mostrar el texto. Esa estructura se va concatenando en una variable que luego se inyecta en el contenedor.

javascript function mostrarAtaques(ataques) { let ataquesMokepon = ''; ataques.forEach((ataque) => { ataquesMokepon += <button id=${ataque.id} class="BAtaque">${ataque.nombre}</button> ; }); contenedorAtaques.innerHTML += ataquesMokepon; }

¿Para qué sirve innerHTML += en este caso? Permite agregar la estructura generada al contenido existente del contenedor sin reemplazarlo, útil cuando inyectas múltiples elementos dinámicos.

¿Por qué aparece el error de null al seleccionar botones?

Cuando declaras tus variables al inicio del archivo con document.getElementById, JavaScript intenta enlazarlas con elementos HTML que aún no existen. Los botones de ataque se generan dinámicamente más adelante, así que esa referencia inicial devuelve null.

La solución es mover esas declaraciones hacia abajo, dentro o después de la función mostrarAtaques, justo en el punto del código donde los botones ya fueron inyectados al DOM. En ese momento las variables dejan de ser const y se convierten en let, porque su valor se asigna después de que el HTML existe.

• Declarar const contenedorAtaques arriba funciona porque ese div siempre está en el HTML estático.
• Declarar los botones individuales arriba falla porque se crean en tiempo de ejecución.
• Reubicar las variables abajo permite enlazarlas con elementos ya renderizados.

¿Cuándo usar const y cuándo let al seleccionar elementos del DOM? Usa const para elementos que siempre existen en el HTML estático y let para variables que asignas después de inyectar contenido dinámicamente.

¿Cómo asignar eventos click a botones generados dinámicamente?

Los addEventListener o asignaciones de onclick también deben moverse hacia abajo, después de que las variables de los botones tengan un valor real. Si los dejas arriba, intentas agregar un evento a algo que todavía es null.

Una vez reubicados, cada botón puede disparar su función correspondiente: la del ataque de fuego, la de agua y la de tierra. Con esto el flujo del juego se completa: eliges personaje, ves los botones de ataque dinámicos y al hacer clic se ejecuta la lógica que define el resultado.

¿Qué problema queda pendiente con los botones repetidos?

Al generar varios ataques con el mismo id, solo el primero recibe el evento de clic. Los demás botones quedan inertes porque getElementById solo devuelve la primera coincidencia. Si haces clic en el segundo o tercer botón con el mismo id, no pasa nada.

Este comportamiento ocurre porque los id en HTML deben ser únicos. Cuando hay duplicados, el navegador y JavaScript ignoran las repeticiones para enlaces uno a uno. La solución implica iterar sobre todos los botones generados y asignar el evento a cada uno individualmente, algo que se resuelve en la siguiente práctica.

• El primer botón funciona porque captura el id correcto.
• El segundo y tercer botón no responden al clic.
• La causa es la unicidad esperada de los id en el DOM.

¿Te has topado con este error de null al manipular elementos creados dinámicamente? Cuéntame en los comentarios cómo lo resolviste en tu propio proyecto.