getElementsByClassName : Vérifier le résultat d'une valeur pour créer une condition

Version imprimable

1 pièce(s) jointe(s)

Bonjour à tous,

Petite question, j'ai le bloc HTML suivant :

Code:

1
2
3
4
5
6
7
8
9
<div class="DataViewer-details card"><img alt="" src="#[FIELD('Image')]#" style="width: 120px; height: 120px; text-align:center; margin: 10px 0 10px 0;" class="fr-draggable">
    <h5><a class="title card-titre" id="pop" title="#[FIELD('Service')]#"><strong><span style="font-size: 18px;">SERVICE</span></strong></a></h5>
    <h4>
        <div class="bouton" id="wkf" style="display:bloc=k;"><a modaltitle="" pagepopup="61024f9b06f02"><button style="font-size:14px;border-radius:0px;">demander</button></a></div>
        <div class="bouton" id="wkf0" style="display:none;"><a modaltitle="" pagepopup="61024f9b06f01"><button style="font-size:14px;border-radius:0px;">demander</button></a></div>
	<div class="dsu" id="restriction" style="display:none;">Champs libre 5</div>	
    </h4>
 
</div>

Ce que je souhaite faire :
si mon champs libre 5 = 'SDAI' alors cache le bouton de l'id "wkf" et affiche le bouton de l'id = "wkf0"

J'ai fait ce premier script

Code:

1
2
3
4
5
6
7
8
9
10
<script type="text/javascript">      valeur = document.getElementById("restriction").innerText;
 
        if (valeur == "SDAI")
        {
            console.log("VAL : " + valeur);
            document.getElementById("wkf").style.display = "none";
            document.getElementById("wkf0").style.display = "block";
        };
 
    </script>

Çà marche bien sauf si je souhaite faire un affichage par tuile(ou vignette), en effet il trouvera mon ID restriction un fois mais pas plus, ce qui semble logique.

Donc je m'oriente vers une recherche par class, mais la je sèche

Code:

1
2
3
4
<script type="text/javascript">
    valeur = document.getElementsByClassName("dsu");
    console.log(valeur);
</script>

Voici mon inspecteur :
Pièce jointe 602661

Ma question, comment avancer dans chaque collection pour vérifier si mon innertext= "SDAI" et afficher le bouton en conséquence

Merci

jour

utilise une boucle

Code:

1
2
3
4
5
6
7
8
9
10
<script type="text/javascript">
 
    valeur = document.getElementsByClassName("dsu");
 
for (var i=0 ; i<valeur.length ; i++){
 
    console.log(valeur[i].innerText);
 
}
</script>

1 pièce(s) jointe(s)

Hello,

J'avais déjà essayé ça (j'aurais du le préciser, sorry).
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <script type="text/javascript"> valeur = document.getElementsByClassName("dsu"); for (var i = 0; i < valeur.length; i++) { console.log(valeur[i].innerText); if ((valeur[i].innerText) == "SDAI") { document.getElementById("wkf").style.display = "none"; document.getElementById("wkf0").style.display = "block"; }; } </script>
Voici le résultat que j'ai du mal à comprendre :

Pièce jointe 602668

Il me change le premier bouton, alors que la valeur qui déclenche le changement n'existe pas sur cette vignette.

1 pièce(s) jointe(s)

Hello,

Du coup, je me suis dit qu'en partant d'une class parent et en me baladant dans l'arbo je trouverais un autre résultat mais non, il continu de me recopier cette donner que je ne comprends pas.

J'en suis arrivé à mettre mon déclencheur dans une même classe,

Code:

1
2
3
4
5
6
7
8
9
<div class="DataViewer-details card"><img alt="" src="#[FIELD('Image')]#" style="width: 120px; height: 120px; text-align:center; margin: 10px 0 10px 0;" class="fr-draggable">
    <h5><a class="title card-titre" id="pop" title="#[FIELD('Service')]#"><strong><span style="font-size: 18px;">SERVICE</span></strong></a></h5>
    <h4>
        <div class="bouton" id="wkf" style="display:bloc=k;"><a modaltitle="" pagepopup="61024f9b06f02"><button style="font-size:14px;border-radius:0px;">demander</button></a></div>
        <div class="bouton" id="wkf0" style="display:none;"><a modaltitle="" pagepopup="61024f9b06f01"><button style="font-size:14px;border-radius:0px;">demander</button></a></div>
	<div class="title card-titre" id="restriction" style="display:none;">Champs libre 5</div>	
    </h4>
 
</div>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script type="text/javascript">
    valeur = document.getElementsByClassName("title card-titre");
 
 
    for (var i = 0; i < valeur.length; i++)
    {
        console.log(valeur[i].innerText);
 
        if ((valeur[i].innerText) == "SDAI")
        {
            document.getElementById("wkf").style.display = "none";
            document.getElementById("wkf0").style.display = "block";
        };
    }
 
</script>

Voici mon résultat : Pièce jointe 602810

En gros :
- a chaque vignette, il repart de la première
- Il voit bien ma chaine de caractère qui doit déclencher ma condition.
- Mais encore une fois, ma condition n'est appliquée que sur la première vignette

Des idées ?

Bonne après midi.

05/08/2021, 16h48
jreaux62

Bonjour,

id="pop", id="wkf", id="wkf0",...

Un attribut id DOIT ÊTRE UNIQUE.

Donc, si tu as PLUSIEURS "cards", tu ne peux pas utiliser les mêmes.
C'est ce qui explique pourquoi le script ne considère que ceux de la 1ère "card"..