Discussion :

[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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[chile]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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.../#post11889125

[chile]

'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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[SpaceFrog]

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

[Doksuri]

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

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.

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById("demo");

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

[SpaceFrog]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[wheel]

essaie ce code

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>