Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Reconhecer o button gerado dinamicamente. #247

Open
HugoCSouza opened this issue Jan 13, 2024 · 0 comments
Open

Reconhecer o button gerado dinamicamente. #247

HugoCSouza opened this issue Jan 13, 2024 · 0 comments

Comments

@HugoCSouza
Copy link

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant