Description
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?