**Ajouter une fonction dans une boucle**

Lucien94
Javascript

Bonjour,

J'ai créé une grille qui contient 6 cartes et chacune des cartes à un bouton qui quand on clic dessus permet d'afficher un texte caché.
Pour afficher ce texte j'ai créé une fonction function showPresentation(), j'ai reussi à ajouter la fonction sur la première carte mais je n'arrive à l'ajouter sur les 5 autres .
Est ce que quelqu'un à une solution à me proposer svp ? j'ai essayé d'ajouter la fonction dans une boucle mais je n'y suis pas arrivé.
Merci.

const card = document.querySelector(".card");
const presentation = document.querySelector(".presentation");
const cross = document.querySelector(".cross");

cross.addEventListener("click", showPresentation);

function showPresentation() {
  if (presentation.style.display === "none") {
    presentation.style.display = "flex";
    card.style.display = "none";
  } else {
    presentation.style.display = "none";
    card.style.display = "flex";
  }
}

3 réponses

JRcode

Bonjour, 

const card = document.querySelector(".card");

Ici seule la première carte avec le sélecteur .card est ciblée. Pour les cibler toutes il faut utiliser :

const cards = document.querySelectorAll(".card")

Cf doc : https://developer.mozilla.org/fr/docs/Web/API/Document/querySelector

Lucien94
Auteur

J'ai déjà essayé, mais je pense qu'il faut inséré la fonction dans une boucle

JRcode

Oui, je pense que c'est l'idée : récupérer toutes les cartes avec "querySelectorAll" puis itérer ensuite sur chacune des cartes avec une boucle forEach pour les rendres visibles ou non.

Après j'ai du mal à comprendre exactement comment fonctionne ton code. Si tu nous partages ta boucle et le contexte on pourra t'aider.