getElementsByClassName + condition innerHTML

Bonsoir!

Je pars d'une fonction qui tourne bien :

Code:

---

1 2 3 4 5 6 7 8 9

function cacher2() { var div2 = document.getElementsByClassName("test"); for(var i=0;i<div2.length;i++) { div2[i].style.display='none'; } };

---

Toutes les div correspondantes sont bien masquées.

Mais j'aurais besoin d'en afficher certaines selon leur contenu, du style :

Code:

---

1 2 3 4 5

if (div2.innerHTML="HELLO") { div2.style.display='block'; };

---

Je n'arrive pas à compiler les deux...

Pour :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<div class="test"> <p>Bonjour</p> </div>   <div class="test"> <p>Bonjour = Hello</p> </div>   <div class="test"> <p>Hello = Bonjour</p> </div>   <div class="test"> <p>Hello</p> </div>

---

Exemple avec textContent :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

function cacher2( str ){ var div2 = document.getElementsByClassName( "test" ), elem;   for ( var i = 0; i < div2.length; i++ ){ elem = div2[i];   if ( elem.textContent.trim() != str ){ elem.style.display = 'none'; } } }   setTimeout( function(){ cacher2( 'Bonjour = Hello' ); }, 3000 );

---

Ok merci, ça marche...
En revanche, n'étant pas du métier et novice en javascript, pour pouvoir l'adapter j'aurais voulu comprendre le rôle de ces codes dans la fonction :

Code:

---

1 2 3

if ( elem.textContent.trim() != str ){ elem.style.display = 'none';

---

et

Code:

---

1 2 3

function(){ cacher2( 'Bonjour = Hello' ); }

---

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<div class="test"> <p>Bonjour</p> </div>   <div class="test"> <p>Bonjour = Hello</p> </div>   <div class="test"> <p>Hello = Bonjour</p> </div>   <div class="test"> <p>Hello</p> </div>

---

Code:

---

cacher2( 'Bonjour = Hello' );

---

Appel la fonction cacher2() avec en paramètre le texte qui doit rester visible, par exemple : "Hello".

Code:

---

1 2 3 4 5

elem = div2[i];   if ( elem.textContent.trim() != str ){ elem.style.display = 'none'; }

---

Traite le texte contenu dans l'élément du DOM, ici elem est div2[i].
Le texte, elem.textContent, doit être débarrassé des espaces inutiles (avant et après le texte) en utilisant la méthode trim(), ce qui donne : elem.textContent.trim().
Si le texte de l'élément du DOM est différent (!=) de celui (str) qui doit rester visible, on le cache.

Eureka, je vois effectivement mieux... Merci encore !

Une question subsidiaire : puis-je attribuer à str une variable, récupérée par l'ID d'un autre élément texte ? Ca ne rime à rien en code je pense, mais quelque chose comme :

Code:

---

var str = document.getElementById('monchamp').textContent;

---

??

Oui !

Le code est bon !

Doc sur textContent : https://developer.mozilla.org/fr/doc...de/textContent

:oops: Je ne sais pas ce que j'ai boutiqué hier soir, mais effectivement ça marche...

En tout cas c'est du script qui me tire une grosse épine du pied, c'est super !