Renderizar botones de ataque dinámicos en JavaScript exige eliminar el HTML estático y trabajar directamente con los datos del personaje seleccionado. Aquí aprenderás a capturar el nombre del personaje, buscarlo dentro de un arreglo de objetos y extraer sus ataques para usarlos después en otra función. Es ideal para quienes practican lógica básica con objetos, arreglos y loops.
Por qué eliminar los botones estáticos del HTML
Los tres botones que tenías en HTML ya no sirven porque cada personaje tiene ataques distintos. La solución es generarlos dinámicamente desde el arreglo ataques que vive dentro de cada objeto personaje.
La lógica se divide en dos funciones claras: una que extrae los ataques del personaje seleccionado y otra que los renderiza en el HTML. Esta clase resuelve la primera.
¿Por qué iterar el arreglo en lugar de escribir los botones? Porque cada personaje tiene poderes distintos. Iterar permite que el HTML se adapte automáticamente al personaje elegido sin duplicar código.
Cómo guardar el nombre del personaje seleccionado
Dentro de la función seleccionarMascotaJugador ya se imprime el nombre del personaje en el HTML, pero ese valor no se está guardando en ninguna variable reutilizable. Y ahí está el detalle: necesitas ese nombre para buscar el objeto completo después.
La solución es declarar una variable global llamada mascotaJugador y asignarle el nombre del personaje en cada validación del if. Así, sin importar cuál de los tres botones se seleccione, el nombre queda almacenado.
javascript
let mascotaJugador;
function seleccionarMascotaJugador() {
if (inputHipodoge.checked) {
mascotaJugador = "Hipodoge";
} else if (inputCapipepo.checked) {
mascotaJugador = "Capipepo";
} else if (inputRatigueya.checked) {
mascotaJugador = "Ratigueya";
}
extraerAtaques(mascotaJugador);
}
Una vez guardado el nombre, lo pasas como parámetro a la siguiente función.
Cómo iterar un arreglo de objetos con un loop for
La función extraerAtaques recibe el nombre y recorre el arreglo mokepones buscando una coincidencia. Aquí entra el clásico loop for, donde la variable i arranca en cero y se incrementa hasta llegar a la longitud del arreglo.
¿Qué hace el loop for en este caso? Recorre cada posición del arreglo mokepones. Si la longitud es 3, i toma valores 0, 1 y 2, accediendo a un personaje distinto en cada vuelta.
Dentro del loop, una validación con if compara el nombre recibido con la propiedad nombre de cada objeto. Cuando coincide, guardas el arreglo de ataques en una variable interna.
javascript
function extraerAtaques(personajeJugador) {
let ataques;
for (let i = 0; i < mokepones.length; i++) {
if (personajeJugador === mokepones[i].nombre) {
ataques = mokepones[i].ataques;
}
}
mostrarAtaques(ataques);
}
La expresión mokepones[i].nombre accede al objeto en la posición i y luego entra a su propiedad nombre. Es la misma mecánica que usaste antes con las tarjetas.
Cómo verificar que los ataques se extraen correctamente
Un console.log(ataques) antes de invocar la siguiente función te confirma que todo funciona. Al seleccionar Capipepo, por ejemplo, la consola muestra un arreglo con sus cinco ataques: tres de tierra, uno de agua y uno de fuego.
Si ves el arreglo completo en consola, la extracción está lista.
Qué función sigue para mostrar los ataques en el HTML
Con los ataques almacenados, el siguiente paso es enviarlos a una función mostrarAtaques que los inyecte en el HTML. La estructura es prácticamente la misma que usaste para renderizar las tarjetas de personajes: iterar el arreglo y construir el HTML con template strings.
- Recibes el arreglo
ataques como parámetro.
- Iteras cada elemento del arreglo.
- Concatenas un botón por cada ataque dentro de una variable de HTML.
- Inyectas el HTML resultante en el contenedor correspondiente.
Tienes toda la estructura lista. Si logras renderizar los botones de ataque antes de la siguiente clase, compártelo en los comentarios.
