Fonction afficher dans une boucle

12 déc. 2022, 17:39

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

<script>
function voletinfo1() {
  var x = document.getElementById("volet1");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
</script>

Code : Tout sélectionner

  <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.

12 déc. 2022, 18:34

Si le contenu de ton volet est différent pour chaque élément de ta boucle, alors il faut que tu le nommes différement (et pas toujours volet1)

En revanche, je te déconseille de multiplier ton code javascript mais plutôt de faire passer en paramètre le nom du volet à afficher/masquer

12 déc. 2022, 21:25

Bonjour, merci pour votre aide.

Afin d'avoir un nom different dans chaque volet pour l'id:

Je détermine une variable avant la boucle

Code : Tout sélectionner

$x = "0";

puis dans la boucle j'incrémente et je vérifie

Code : Tout sélectionner

                   $x = $x + 1;  
                   echo $x;

puis j'insère ma focntion

Code : Tout sélectionner

		<script>
function voletinfo1() {
  var x = document.getElementById($x);
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

</script>

puis j'insère bouton volet et contenu

Code : Tout sélectionner

						  <button class="buttonvoletinfo" onClick="voletinfo1()">Contenus en espagnol 2</button>
						  
						  <div class="volet1" id=<?php echo $x;?> style="display: none;"> test </div>

Mais mon bouton n'ouvre plus.

12 déc. 2022, 21:30

en faisant un test sur le nom du document.getElementById avec comme 5 comme nom, le bouton volet volet fonctionne, mais seulement sur le premier résultat de ma boucle.

Code : Tout sélectionner

		<script>
function voletinfo1() {
  var x = document.getElementById("5");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

</script>

12 déc. 2022, 21:40

"mais plutôt de faire passer en paramètre le nom du volet à afficher/masquer"

12 déc. 2022, 21:48

Merci or 1, mais je n'ai pas compris ta suggestion, si tu peux m'éclaircir stp.

12 déc. 2022, 23:07

Le plus logique serait de passer un paramètre à ta fonction, le paramètre en question : l'ID de la div que tu veux afficher/cacher :

Code : Tout sélectionner

function voletinfo1(div_id) {
var x = document.getElementById(div_id);
...

13 déc. 2022, 05:10

J'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 : Tout sélectionner

                <?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>

Fonction afficher dans une boucle

Qui est en ligne