digitalinnovationone / js-developer-pokedex

566 stars 4.07k forks source link

Reconhecer o button gerado dinamicamente. #247

Open HugoCSouza opened 8 months ago

HugoCSouza commented 8 months ago

Boa tarde,

Gostaria de uma ajuda para conseguir reconhecer um button que fiz para detectar o click no objeto para aparecer os detalhes do pokemons:

Eu modifiquei a função "convertPokemonToLi" adicionando um button, ficando assim:

function convertPokemonToLi(pokemon) {
    return `
        <li class="pokemon ${pokemon.type}">
  ->          <button class="buttonDetails" type="button">
   ->             Details
    ->        </button>
            <span class="number">#${pokemon.number}</span>
            <span class="name">${pokemon.name}</span>

            <div class="detail">
                <ol class="types">
                    ${pokemon.types.map((type) => `<li class="type ${type}">${type}</li>`).join('')}
                </ol>

                <img src="${pokemon.photo}"
                     alt="${pokemon.name}">
            </div>
        </li>
    `
}

Sendo assim, por cima da imagem da pokedex, será gerado um button. Deixei este button transparente, e o trouxe para frente do elemento, para ser acionável.

Como o elemento será gerado dinamicamente, acredito que seja necessário criar uma promise para segurar as referências dos buttons, cujo código é este:

const detailsButtonsPromise = new Promise((resolve) => {
    document.addEventListener('DOMContentLoaded', () => {
        const detailsButtons = document.querySelectorAll('.buttonDetails');
        resolve(detailsButtons);
    });
});

O argumento DOMContentLoaded, diz respeito a só resolver a promise após carregar a página HTML, antes dos elementos externos. E por fim, a resolução da promise, seria:

detailsButtonsPromise.then((detailsButtons) => {
    debugger
    console.log(detailsButtons)
    detailsButtons.forEach(button => {
        debugger
        console.log('oi');
        button.addEventListener('click', () => {
            console.log(`Clicou o botão ${button.id}`);
        });
    });
});

Porém, ao imprimir a variável "detailsButtons" é retornado uma lista vazia. Não consigo um resultado diferente, alguém poderia me ajudar?