Page 1 sur 1
Fonction afficher dans une boucle
Posté : 12 déc. 2022, 17:39
par Chile
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.
Re: Fonction afficher dans une boucle
Posté : 12 déc. 2022, 18:34
par @rthur
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
Re: Fonction afficher dans une boucle
Posté : 12 déc. 2022, 21:25
par Chile
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
puis dans la boucle j'incrémente et je vérifie
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.
Re: Fonction afficher dans une boucle
Posté : 12 déc. 2022, 21:30
par Chile
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>
Re: Fonction afficher dans une boucle
Posté : 12 déc. 2022, 21:40
par or 1
"mais plutôt de faire passer en paramètre le nom du volet à afficher/masquer"
Re: Fonction afficher dans une boucle
Posté : 12 déc. 2022, 21:48
par Chile
Merci or 1, mais je n'ai pas compris ta suggestion, si tu peux m'éclaircir stp.
Re: Fonction afficher dans une boucle
Posté : 12 déc. 2022, 23:07
par two3d
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);
...
Re: Fonction afficher dans une boucle
Posté : 13 déc. 2022, 05:10
par Chile
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>