Cacher du texte en JS

Sujet résolu

14 janvier 2021 à 17:48:34

Bonjour, je suis en 1ère Spé NSI, et j'ai un TD à rendre ce soir.

Il y a un exercice dont l'objectif est d'afficher un DIV en cliquant sur un titre (le div qui s'affiche dépend du titre sur lequel on clique), et cacher tout les divs en cliquant sur un bouton. J'ai réussi à faire afficher les divs mais je n'arrive pas à les cacher. Voici mon code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Mon titre</title>
    <script>
    function afficherContenuDiv(x){
      const texte = document.getElementById('titre'+x);
      texte.style.display = "block";
    }
    function cacherLesDivs(){
      const texte = document.getElementByTagName('div');
      texte.style.display = "none";
    }
</script>
  </head>
  <body>
    <h1 onclick="afficherContenuDiv(1)">Partie 1</h1>
    <div id="titre1" class="titre"style="display:none">
      <p>Mon premier paragraphe</p>
      <p>Mon second paragraphe</p>
    </div>
    <h1 onclick="afficherContenuDiv(2)">Partie 2</h1>
    <div id="titre2" class="titre" style="display:none">
      <p>Mon premier paragraphe</p>
      <p>Mon second paragraphe</p>
    </div>
    <p><input type="submit" value="Masquer" onclick="cacherLesDivs()" /></p>
    <p>
      Titre n°: <input type="text" id="titre" />
      <input type="submit" value="Afficher" onclick="alertTitre()" />
    </p>
  </body>
</html>

Pourquoi ça ne fonctionne pas ?

NadfriJS

14 janvier 2021 à 18:14:48

Salut, tu as des petites erreurs:

1) C'est pas :

document.getElementByTagName('div');

Mais:

document.getElementsByTagName('div')

Le "s" fait toute la difference, ca veut dire qu'on va récupérer tous les éléments div, ces éléments doivent bien être stockés quelque part, et logiquement c'est dans un tableau.

2) Vu qu'on a un tableau, si on veut appliquer un display none à chacun des éléments, on doit boucler sur tout le tableau:

function cacherLesDivs(){
  const divs = document.getElementsByTagName('div');
  
  for(let i=0; i<divs.length; i++)
    divs[i].style.display = "none";
}

Ou avec une boucle for of, qui est plus pratique:

function cacherLesDivs(){
  const divs = document.getElementsByTagName('div');
  
  for(let div of divs)
    div.style.display = "none";
}

La 1ere valeur du for of, ici div au singulier, peut avoir n'importe quel nom, ce n'est pas important, il faut juste comprendre que cette variable represente 1 élément du tableau, et on va faire le tour de tous les éléments, un par un.

La meilleure solution est toujours la plus simple. Ma chaîne Youtube [Tutos pour débutants]

Rayyy 라얀

14 janvier 2021 à 18:21:36

Ca fonctionne, je n'avais pas pensé à la boucle, merci beaucoup