Skip to content

Reconhecer o button gerado dinamicamente. #247

Open
@HugoCSouza

Description

@HugoCSouza

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?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions