[Problème] Avec un javascript pour montrer/cacher un div

Version imprimable

28/08/2006, 12h12
draho

[Problème] Avec un javascript pour montrer/cacher un div
salut à tous, bon voilà, j'utilise ce js pour montrer/cacher un div
Code:

1 2 3 4 5 6 7 8 function montrer(etat, id) { var el = document.getElementById(id); if (etat == true) {el.style.display="block";} else {el.style.display="none";} }
Je l'utilise sur des "input" de type "radio". A chaque radio, j'affiche un div différent.
Lorsque le clique sur un radio, cela affiche le div qui va bien. ça OK.
Mais lorsque je clique sur un autre radio, le 2eme div s'affiche, mais le 1er ne disparait pas :(

Je voudrai savoir comment modifier mon js pour qu'un seul div soit affiché.

Merci d'avance, en espérant avoir été clair.
28/08/2006, 12h15
KiLVaiDeN

Salut,

Le plus simple : créer une fonction "reset" qui mettrait tous tes DIV en hidden. (display:none)

Et tu appelles ta fonction reset() avant l'appel à montrer().

A+

Bonjour,

voici les fonctions javascript que j'utilise pour cacher / afficher mes blocs. Si ça peut aider. ;)
s représente l'id du bloc.

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
function afficher(s)
{
	document.getElementById(s).style.visibility='visible';
	document.getElementById(s).style.position='static';
}
 
 
function cacher(s)
{
	document.getElementById(s).style.visibility='hidden';
	document.getElementById(s).style.position='absolute';
}
 
function inverser(s)
{
		if(document.getElementById(s).style.visibility=='hidden')
		{
				afficher(s);
		}
		else
		{
				cacher(s);
		}
}

28/08/2006, 14h05
draho

Citation:

Envoyé par KiLVaiDeN

Salut,

Le plus simple : créer une fonction "reset" qui mettrait tous tes DIV en hidden. (display:none)

Et tu appelles ta fonction reset() avant l'appel à montrer().

A+

ça je ne sais pas faire :/ (je veux dire que que TOUS les div soit en hidden)
28/08/2006, 14h08
KiLVaiDeN
C'est facile : tu appelles séquentiellement des "montrer" à false, sur tous les divs que tu veux cacher :)

quelque chose comme :
Code:

1 2 3 4 5 6 function toutCacher() { montrer(false,'div1'); montrer(false,'div2'); montrer(false,'div3'); montrer(false,'div4'); }
Et dans ton évènement JavaScript :

Code:

onClick="toutCacher(); montrer('true','div1')"

Par exemple..

Sinon, tu peux mémoriser à chaque appel de montrer, le div en cours d'affichage; et ainsi, optimiser tout ça, au lieu d'appeller plusieurs fois la même méthode: c'est plus propre, mais bon un peu plus compliqué. Je ne sais pas si tu vois dans l'idée :)

A+
28/08/2006, 14h13
draho

ok je vois, mais ton système nécessite donc de connaitre tous les divs présents . . . Il y a plus qu'à trouver un moyen de le référencer :D

Sinon pour la deuxième solution, je vois ce que tu veux dire mais ça me parait au delà de mes compétences :?

Citation:

Envoyé par draho

ok je vois, mais ton système nécessite donc de connaitre tous les divs présents . . . Il y a plus qu'à trouver un moyen de le référencer :D

Sinon pour la deuxième solution, je vois ce que tu veux dire mais ça me parait au delà de mes compétences :?

en haut de page :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <script language="JavaScript"> var lastShowedDiv = 'firstValue'; function montrerDiv(etat, nomDiv) { if( etat ) { if( lastShowedDiv != 'firstValue' ) // On cherche à afficher un div, il faut mettre l'ancien en hidden, si il existe document.getElementById(lastShowedDiv).style.display='none'; lastShowedDiv = nomDiv; document.getElementById(nomDiv).style.display='block'; } else { document.getElementById(nomDiv).style.display='none'; } } </script>

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
<div id="d0">Vous avez cliqué sur le premier bouton.</div>
<div id="d1">Vous avez cliqué sur le deuxième bouton.</div>
<div id="d2">Vous avez cliqué sur le troisième bouton.</div>
 
 
<p>
<input type="radio" name="r" value="1" />bouton 1<br />
<input type="radio"  name="r" value="2" />bouton 2<br />
<input type="radio"  name="r" value="3" />bouton 3
</p>
 
 
<script type="text/javascript">
 
var lequel;
 
var ra=document.getElementsByName("r");
for(i=0;i!=ra.length;i++){
	ra[i].ind=i;
	ra[i].onclick=function(){
		if(lequel){
			lequel.style.display="none";
		}
 
		lequel=document.getElementById("d"+this.ind);
		lequel.style.display="block"
 
	}
}
</script>

28/08/2006, 14h30
draho

Citation:

Envoyé par KiLVaiDeN

.

ça me pose problème car j'ai plusieurs niveau de "radio".
Quand je clique sur un radio, ça affiche une 2eme ligne de "radio" et donc quand je sélectionne un radio de cette 2eme ligne, ça cache tout :s (je sais je suis pas très clair mais c'est difficile à expliquer)

en fait je voudrai que ma fonction cache/affiche également en fonction du 'name' du 'radio'
28/08/2006, 17h26
draho

je commence à désespérer là :( personne comprend mon problème ou il est insurmontable?
28/08/2006, 17h29
KiLVaiDeN
Citation:

Envoyé par draho

ça me pose problème car j'ai plusieurs niveau de "radio".
Quand je clique sur un radio, ça affiche une 2eme ligne de "radio" et donc quand je sélectionne un radio de cette 2eme ligne, ça cache tout :s (je sais je suis pas très clair mais c'est difficile à expliquer)

en fait je voudrai que ma fonction cache/affiche également en fonction du 'name' du 'radio'

Hmm.

En gros, tu as un radio, qui affiche un div, qui lui meme contient des radios qui affichent des div ? lol :)

Dans ce cas, tu implémentes plusieurs fonctions, une par niveau... Mais ça parrait être une petite usine à gaz ton truc :)

Par exemple :
Code:

1 2 toutcacherniveau2() montrerNiveau2()
A+

Code:

1 2 3 4 5 function montrer(Elt) { Obj= document.getElementById(Elt); Obj.style.display= (Obj.style.display=="block")?"none":"block"; }
le style est il initialisé dans la balise ?

:lahola: 6000 ème message :D

bon, restons calmes et n'ayons pas l'impression de parler dans le vide;
en intégrant les nouvelles "contraintes", ça donnerait ça?

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>...</title>
 
<style type="text/css">
 
#d0, #d1, #d2 {
display:none;
}
 
</style>
 
 
</head>
 
<body>
 
 
<p style="margin-bottom:50px;width:200px;text-align:center;border:solid 1px #000000">
<input type="radio" name="r" value="1" />bouton 1<br />
<input type="radio"  name="r" value="2" />bouton 2<br />
<input type="radio"  name="r" value="3" />bouton 3</p>
</p>
 
<div id="d0">Vous avez cliqué sur le premier bouton.<br />
<input type="radio" name="r0" value="1" />choix 1 du premier menu<br />
<input type="radio"  name="r0" value="2" />choix 2 du premier menu<br />
<input type="radio"  name="r0" value="3" />choix 3  du premier menu
</div>
<div id="d1">Vous avez cliqué sur le deuxième bouton.<br />
<input type="radio" name="r1" value="1" />choix 1 du deuxième menu<br />
<input type="radio"  name="r1" value="2" />choix 2 du deuxième menu<br />
<input type="radio"  name="r1" value="3" />choix 3 deuxième menu
</div>
<div id="d2">
Vous avez cliqué sur le troisième bouton.<br />
<input type="radio" name="r2" value="1" />choix 1 du troisième menu<br />
<input type="radio"  name="r2" value="2" />choix 2 du troisième menu<br />
<input type="radio"  name="r2" value="3" />choix 3 du troisième menu
</div>
 
 
<script type="text/javascript">
 
var lequel;
var ra=document.getElementsByName("r");
 
for(i=0;i!=ra.length;i++){
	ra[i].ind=i;
	ra[i].onclick=function(){
		if(lequel){
			lequel.style.display="none";
		}
 
		lequel=document.getElementById("d"+this.ind);
		lequel.style.display="block";
 
 
	}
}
 
 
</script> 
 
</body>
</html>

29/08/2006, 09h26
draho

désolé javatwister, mais tu donne ton code sans explication ni rien, c'est pas évident... :? m'enfin je vais essayer de déchiffrer ça.
29/08/2006, 09h48
javatwister

:roll:

désolé, c'est une habitude que j'ai sur les forums: si tu regarde bien, tu verras qu'il s'agit d'une page complète ... désolé de ne pas avoir mis le résultat en ligne, j'oublie parfois :roll:

http://javatwist.imingo.net/radio.htm
29/08/2006, 10h13
draho

Citation:

Envoyé par javatwister

:roll:

désolé, c'est une habitude que j'ai sur les forums: si tu regarde bien, tu verras qu'il s'agit d'une page complète ... désolé de ne pas avoir mis le résultat en ligne, j'oublie parfois :roll:

Ok merci . . . :roll:
En tout cas, en copiant/collant ton code, j'obtiens pas vraiment ce que je veux. Il faudrai que quand je clique sur "choix 1 du troisième menu" par exemple, ça ouvre une autre ligne de radio.
29/08/2006, 10h21
javatwister

:lol: :mouarf:

quelqu'un pour prendre le relais, pendant que je mets à jour l'exemple?

:mrgreen:
29/08/2006, 10h26
SpaceFrog

alors en stock il nous reste :
intérieur cuir
peinutre métalisée
jantes alliage
GPS avec supplément
ceintures de sécurité en organdi
volant en moumoute

et pour un euro de plus on l'mballe dasn du papier de soie et on livre à domicile

:mouarf:

voilà, c'est à hurler de rire du point de vue de la rentabilité et de l'ergonomie:

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>...</title>
 
<style type="text/css">
 
div div {
display:none;
}
 
</style>
 
 
</head>
 
<body>
 
 
<div style="margin-bottom:50px;width:150px;padding-left:50px;">
<input type="radio" name="r" value="1" />111<br />
<input type="radio"  name="r" value="2" />222<br />
<input type="radio"  name="r" value="3" />333
</div>
 
<div style="margin-bottom:50px;padding-left:100px">
<div id="d0">Vous avez choisi la première option<br />
<input type="radio" name="r0" value="1" />444<br />
<input type="radio"  name="r0" value="2" />555<br />
<input type="radio"  name="r0" value="3" />666
</div>
<div id="d1">Vous avez choisi la deuxième option.<br />
<input type="radio" name="r1" value="1" />777<br />
<input type="radio"  name="r1" value="2" />888<br />
<input type="radio"  name="r1" value="3" />999
</div>
<div id="d2">Vous avez choisi la troisième option.<br />
<input type="radio" name="r2" value="1" />101010<br />
<input type="radio"  name="r2" value="2" />111111<br />
<input type="radio"  name="r2" value="3" />121212
</div>
</div>
 
<div style="margin-bottom:50px;padding-left:150px">
<div id="d3">Démerdez-vous pour savoir d'où vous venez.<br />
<input type="radio" name="op3" value="1" />131313<br />
<input type="radio"  name="op3" value="2" />141414<br />
<input type="radio"  name="op3" value="3" />151515
</div>
<div id="d4">Démerdez-vous pour savoir d'où vous venez.<br />
<input type="radio" name="op4" value="1" />161616<br />
<input type="radio" name="op4" value="2" />171717<br />
<input type="radio" name="op4" value="3" />181818
</div>
<div id="d5">Démerdez-vous pour savoir d'où vous venez.<br />
<input type="radio" name="op5" value="1" />191919<br />
<input type="radio" name="op5" value="2" />202020<br />
<input type="radio" name="op5" value="3" />212121
</div>
<div id="d6">Démerdez-vous pour savoir d'où vous venez.<br />
<input type="radio" name="op6" value="1" />222222<br />
<input type="radio" name="op6" value="2" />232323<br />
<input type="radio" name="op6" value="3" />242424
</div>
<div id="d7">Démerdez-vous pour savoir d'où vous venez.<br />
<input type="radio" name="op7" value="1" />252525<br />
<input type="radio" name="op7" value="2" />262626<br />
<input type="radio" name="op7" value="3" />272727
</div>
<div id="d8">Démerdez-vous pour savoir d'où vous venez.<br />
<input type="radio" name="op8" value="1" />282828<br />
<input type="radio" name="op8" value="2" />292929<br />
<input type="radio" name="op8" value="3" />303030
</div>
<div id="d9">Démerdez-vous pour savoir d'où vous venez.<br />
<input type="radio" name="op9" value="1" />313131<br />
<input type="radio" name="op9" value="2" />323232<br />
<input type="radio" name="op9" value="3" />333333
</div>
<div id="d10">Démerdez-vous pour savoir d'où vous venez.<br />
<input type="radio" name="op10" value="1" />343434<br />
<input type="radio" name="op10" value="2" />353535<br />
<input type="radio" name="op10" value="3" />363636
</div>
<div id="d11">Démerdez-vous pour savoir d'où vous venez.<br />
<input type="radio" name="op11" value="1" />373737<br />
<input type="radio" name="op11" value="2" />383838<br />
<input type="radio" name="op11" value="3" />393939
</div>
</div>
 
<script type="text/javascript">
 
 
var t=[];
 
var lequel, laquelle;
var ra=document.getElementsByTagName("input");
	for(i=0;i!=ra.length;i++){
		ra[i].ind=i;
		if(ra[i].name.charAt(0)=="r"){
			t.push(ra[i])
		}
		else if(ra[i].name.indexOf("op")==0){
			ra[i].onclick=function(){
				alert("Au secours! On me dit que je viens de sélectionner le numéro " + (this.ind + 1) + "\nmais je veux bien être pendu si je me souviens à quoi ça correspond!")
			}
		}
	}
 
for(i in t){
 
	t[i].onclick=function(){
 
		if(this.name=="r"){
			if(lequel){
				lequel.style.display="none";
			}
			if(laquelle){
				laquelle.style.display="none";
			}
 
		lequel=document.getElementById("d"+this.ind);
		lequel.style.display="block";
 
		}
		else{
			if(laquelle){
				laquelle.style.display="none";				
			}
 
		laquelle=document.getElementById("d"+this.ind);
		laquelle.style.display="block";
 
		}		
	}
}
 
 
</script> 
 
</body>
</html>

29/08/2006, 14h13
draho

:mouarf: j'ai sourit quand j'ai vu le pop-up :mrgreen:

Merci en tout cas de votre patience à tous, je vais tenter de me débrouiller comme ça ;)
29/08/2006, 14h17
SpaceFrog

JT la prochaine fois on va te demander d'aller le taper sur l'écran de celui qui à posé la question ...
29/08/2006, 14h19
javatwister

ouais... remarque j'ai un peu de temps aujourd'hui alors si c'est pas trop loin... http://javatwist.imingo.net/sm41.gif
29/08/2006, 14h48
draho

Citation:

Envoyé par javatwister

ouais... remarque j'ai un peu de temps aujourd'hui alors si c'est pas trop loin... http://javatwist.imingo.net/sm41.gif

Sisi c'est loin
"patapay patapay" :piou:
01/10/2006, 11h54
Flushovsky

Salut,

La ca fonctionne avec des boutons radios. Est-ce qu'on peut faire la même chose avec des balises du genre :

Code:

<a href="#" onclick="javascript:()"><img src="mon image"/></a>

Merci
01/10/2006, 17h02
Flushovsky

En fait, j'ai trouvé.

A++ les gens et merci :mouarf: