Fonction afficher dans une boucle

Version imprimable

12/12/2022, 16h43
chile

Fonction afficher dans une boucle
Bonjour,
Je souhaite avoir un teste situé dans un 'volet' qui s'affiche ou pas en cliquant sur un bouton. Cette fonction se trouve dans une boucle.
J'ai utilisé la fonction java x.style.display, mais cela ne fonctionne que sur le premier résultat de ma boucle.
Code : Tout sélectionner
Code:

1 2 3 4 5 6 7 8 9 10 <script> function voletinfo1() { var x = document.getElementById("volet1"); if (x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; } } </script>
Code:

1 2 3 <button class="buttonvoletinfo" onClick="voletinfo1()">Contenus en espagnol 2 </button> <div class="volet1" id="volet1" style="display: none;"> test </div>
Je ne vois pas trop comment faire. Si quelqu'un peut m'aider, merci.

J'ai passé la journée à tester plein de solutions.

Même en nommant le document.getElementById en 5, j'ai seulement le volet de la première ligne qui s'ouvre :(
Code:

1 2 3 4 5 6 7 8 9 10 11 <script> function voletinfo1() { var x = document.getElementById("5"); if (x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; } } </script>
Code:

<div class="volet1" id="5" style="display: none;"> test </div>

12/12/2022, 21h10
mathieu

si vous utilisez les "id", cela veut dire que vous avez fait une fonction pour chaque élément. c'est bien ça ?

pour éviter cette duplication du code, il vaut mieux utiliser les classes css et comme ça vous pouvez utiliser getElementsByClassName et faire des boucles pour gérer cela :
https://developer.mozilla.org/fr/doc...ntsByClassName

regardez aussi l'exemple dont le lien est dans ce message :
https://www.developpez.net/forums/d2.../

'ai avancé, mais je bloque sur l'écriture d'un variable dans le document.getElementById().
J'ai besoin d'y insérer la variable $n derriere le volet_, mais je ne sais pas l'écrire.
En notant volet_1, j'ai bien le volet 1 qui s'ouvre ,avec volet_2 le volet 2 s'ouvre...
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 <?php do { $n = $n + 1; ?> <script> function voletinfo() { var x = document.getElementById('volet_'); if (x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; } } </script>

13/12/2022, 08h55
SpaceFrog

Je ne sais pas si c'est toujours d'actualité, mais "autrefois" un id ne devait jamais être uniquement numérique
13/12/2022, 09h20
Doksuri

Citation:

Envoyé par SpaceFrog

Je ne sais pas si c'est toujours d'actualité, mais "autrefois" un id ne devait jamais être uniquement numérique

oui developer.mozilla.org/fr/docs/Web/HTML/Global_attributes/id

Citation:

Envoyé par mdn

La valeur de cet attribut ne doit pas contenir de blancs (espaces, tabulation, etc.). Les navigateurs interprèteront les identifiants avec des espaces comme si l'espace faisait partie de l'identifiant. Ce comportement est différent de celui de l'attribut class qui permet d'avoir des valeurs séparées par des espaces. Les éléments ne peuvent avoir qu'un seul identifiant défini via l'attribut id.
13/12/2022, 11h40
chile

Merci, mais si je tape document.getElementById() sur internet et je regarde les résultat, je ne vois que des résultats du genre

Code:

document.getElementById("demo");

Code:

var number=document.getElementById("number").value;

Code:

var element = document.getElementById('ID');

Moi j'ai besoin d'y intégrer une variable, car je l'utilise pour une fonction afficher/cacher dans une boucle et il me faut un id différent pour chaque ligne.

Quelqu'un sur le forum pourrait vraiment m'aider sur ça ?
13/12/2022, 12h54
SpaceFrog

Code:

var number=document.getElementById("number"+increment).value;

essaie ce code

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<html>
<style>
 .buttonvoletinfo{
         background-color:#fff;
    }
 .buttonvoletinfoOFF{
         background-color:#ff0;
    } 
 #volet div {
           display: none;
    }
 
</style>
<script>  
function voletinfo1(cliquant,cible_id) 
{        
  if (document.getElementById(cible_id).style.display == "block"){  
    document.getElementById(cible_id).style.display="none"; 
    cliquant.className="buttonvoletinfo";  
  }else{   
    document.getElementById(cible_id).style.display="block";
    cliquant.className="buttonvoletinfoOFF";  
  }            
 
}  
</script>  
<body>
 <div id="volet">
 <?php
    $n =0;
    do {
     $n = $n + 1;
 ?>
   <button onClick="voletinfo1(this,'volet<?=$n?>');">Contenus en espagnol <?=$n?> </button><br>
   <div  id="volet<?=$n?>" > test <?=$n?> 
 
   </div>	
 
  <?php
    }while($n < 5);
 ?>  
 
</body>	
</html>