-2

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.

1
  • 1
    Ola @Isabela, 1) querySelector retorna o primeiro elemento encontrado, acredito que você vai precisar utilizar o querySelectorAll. 2) A ordem que do seu código, pode ser um problema, note que a "query" e o addEventListener 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ção cards mais tarde. 13/09 às 20:50

1 Resposta 1

-2

para que cada card aponte para uma pagina diferente você precisa criar uma relação unica entre o card e sua pagina. recomendo envelopar o button com uma tag ancora assim.

<a href="home/cardid" ><button class='read-more'>${"Detalhes"}</button></a>

passando no href o caminho onde o cardid é , por exemplo, uma indentificado unico e em comum entre o card e a pagina

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .