Eventos de Clic en Botones con JavaScript

Luego de que el usuario de tu videojuego haya seleccionado un mokepon para jugar, la lógica interna de la aplicación requiere capturar los ataques del personaje y renderizarlos hacia el HTML para que el usuario pueda interactuar con los botones.

Renderizado de los ataques

Comienza creando un <div> en el HTML y seleccionando el mismo desde el Javascript donde renderizaremos cada botón de ataque del mokepon seleccionado.

<div id="contenedorAtaques" class="tarjetas-ataques">
</div>

const contenedorAtaques = document.getElementById('contenedorAtaques');

Luego de haber capturado los ataques del mokepón seleccionado en la función extraerAtaques(), envía esta información a una nueva función llamada mostrarAtaques() donde crearemos el código HTML.

function extraerAtaques(mascotaJugador) {
    // ...
    mostrarAtaques(ataques)
}

function mostrarAtaques(ataques) {
    ataques.forEach((ataque) => {
        ataquesMokepon = `
            <button id=${ataque.id} class="boton-de-ataque">
                ${ataque.nombre}
            </button>
        `;
        // Renderizamos cada ataque del personaje
        contenedorAtaques.innerHTML += ataquesMokepon;
    });
    
    // Seleccionar botones luego de crearlos
    botonFuego = document.getElementById('boton-fuego');
    botonAgua = document.getElementById('boton-agua');
    botonTierra = document.getElementById('boton-tierra');

    // Agregar evento a los botones
    botonFuego.addEventListener('click', ataqueFuego);
    botonAgua.addEventListener('click', ataqueAgua);
    botonTierra.addEventListener('click', ataqueTierra);
}

Al crear el código nuevo código HTML para cada botón de los ataques del mokepon, tienes que tener en cuenta que debes seleccionar los mismos con document.getElementById() y posteriormente agregarle el evento al hacer clic con addEventListener().

Asegúrate también de borrar el código que tu aplicación ya no necesite, dado que ahora estamos creando código HTML dinámicamente. A diferencia de crear el código de forma estática, es importante evaluar el momento de captura de los elementos HTML y su posterior asignación de eventos.

---

Contribución creada por: Kevin Fiorentino (Platzi Contributor)