Afficher masquer en fonction d'une variable

Version imprimable

Bonjour,

Je débute.... je cherche à afficher ou masquer un formulaire ou un autre en fonction d'une variable... mais sans succes..

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
<html>
<head>
</head>
<body>
<script type="text/javascript">
 
function afficher()
{
var test="1";
 
    if (test == "1")
    {
      document.getElementById("toto").style.visibility="visible";
	  document.getElementById("tata").style.visibility="hidden";
    }
    else
    {
       document.getElementById("tata").style.visibility="visible";
	   document.getElementById("toto").style.visibility="hidden";
    }
    return true;
}
 
 
 
</script>
 
<script type="text/javascript">
document.onload = afficher();
</script>
 
<form id="toto" name="toto">
   <p>Texte toto</p>
</form>
<form id="tata" name="tata">
   <p>Texte tata</p>
</form>
 
</body>
</html>

Si une âme charitable veut bien m'aider :-)

Merci par avance

01/11/2015, 14h33
NoSmoking

Bonjour,
dans le code que tu présentes tu passeras TOUJOURS dans la première condition, je n'en vois pas trop l'intérêt !

Question, affichage en fonction de quelle variable, où est-elle dans ta page/code ?
01/11/2015, 19h21
Gribouille92

C'est en fait la variable test que je récupère en amont.
Dans le code que je présente j'ai mis var test="1" afin comprendre comment afficher ou masquer mes form

Bonjour,

par exemple :

Code:

1
2
3
4
5
6
7
8
9
10
11
<body onload="afficher(1);">
<p><a href="#" onclick="afficher(1);return false;">voir toto</a> / <a href="#" onclick="afficher(2);return false;">voir tata</a></p>
 
<form id="toto" name="toto">
   <p>Texte toto</p>
</form>
<form id="tata" name="tata">
   <p>Texte tata</p>
</form>
 
</body>

Code:

1
2
3
4
5
6
7
8
9
10
11
function afficher(id)
{ 
    if (id == "1")
    {
	  document.getElementById("toto").style.visibility="visible";
	  document.getElementById("tata").style.visibility="hidden";
    } else {
	  document.getElementById("tata").style.visibility="visible";
	  document.getElementById("toto").style.visibility="hidden";
    }
}

2ème exemple (avec 4 boxes) :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html>
<head>
</head>
<body onload="afficher(1);">
<p><a href="#" onclick="afficher(1);return false;">voir box1</a></p> <p><a href="#" onclick="afficher(2);return false;">voir box2</a></p>
<p><a href="#" onclick="afficher(3);return false;">voir box3</a></p> <p><a href="#" onclick="afficher(4);return false;">voir box4</a></p>
 
<form class="box" id="box1" name="toto">
   <p>Texte box1</p>
</form>
<form class="box" id="box2" name="tata">
   <p>Texte box2</p>
</form>
<form class="box" id="box3" name="toto">
   <p>Texte box3</p>
</form>
<form class="box" id="box4" name="tata">
   <p>Texte box4</p>
</form>
 
</body>
</html>

Code:

1
2
3
4
5
6
7
8
9
function afficher(id)
{ 
  boxes = document.getElementsByClassName('box');
  for(var i=0; i<boxes.length; i++)
  {
    boxes[i].style.display="none";
  }
  document.getElementById('box'+id).style.display="block";
}

01/11/2015, 20h10
Gribouille92

MERCI BEAUCOUP !!!!

Cependant, je ne peux pas mettre de onload sur la balise body...
<body onload="afficher(1);">

Y a t il une autre alternative ?
01/11/2015, 20h12
Invité

Définir dans le CSS les box à afficher et celles à masquer, par défaut.