Boa tarde, montei alguns cards em uma função no meu javascript, a partir de dados do Json, com o innerHTML. Ao final de cada card adicionei um botão que levaria pra outra página na qual estariam mais detalhes sobre o card específico no qual a pessoa clicou. Não sei se estou com problema de capturar a class do botão ou se na verdade o erro vem de vários botões com a mesma class.
Index.htlm:
const buttonDetails = document.querySelector(".read-more");
//montar os cards
function cards(data) {
dataPokemon.innerHTML = "";
for (let poke of data) {
dataPokemon.innerHTML += `<figure class='cards'>
<h3 class='title-card'>${poke.name}</h3>
<p>
<strong>Generation:</strong>
${poke.generation.num} -
${poke.generation.name}
</p>
<img class='img-card'src=${poke.img}></img>
<figcaption class='about-card'>${poke.about}
</figcaption>
<p>
<strong>Type:</strong>
${poke.type.join(", ")}
<br><br><strong>Rarity:</strong>
${poke["pokemon-rarity"]}
</p>
<button class='read-more'>${"Detalhes"}</button>
</figure>
`;
}
}
//evento
buttonDetails.addEventListener("click", () => {
window.location.href = "details.html";
});
Muito obrigada.
querySelector
retorna o primeiro elemento encontrado, acredito que você vai precisar utilizar oquerySelectorAll
. 2) A ordem que do seu código, pode ser um problema, note que a "query" e oaddEventListener
estão sendo executados teoricamente em um momento que ainda não existe o botão, já que ele vai ser criado por uma chamada da funçãocards
mais tarde.