Pourquoi celà nécessite-t-il un double clic ?

Version imprimable

Bonjour,

Je ne comprends pas le comportement de mon bout de JavaScript… Pour qu'il fonctionne il a besoin d'un double clic, alors qu'il devrait fonctionner avec un simple clic. Si qqun a le pourquoi du comment, celà m'intéresse fortement.

Voici mon code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script type="text/javascript">
			function spoiler_text(nom_div)
			{
			if (document.getElementById(nom_div).style.display=="none" )
				{document.getElementById(nom_div).style.display="block";}
			else
				{document.getElementById(nom_div).style.display="none";}
			}
 
			function spoiler_img(nom_div)
			{
			if (document.getElementById(nom_div).style.display=="block" )
				{document.getElementById(nom_div).style.display="none";}
			else
				{document.getElementById(nom_div).style.display="block";}
			}
		</script>
<div id="qui">
			<span onClick="spoiler_text('qui_spoiler'), spoiler_img('qui_image');" id="qui_image"></span>
			<div id="qui_spoiler" onClick="spoiler_text('qui_spoiler'), spoiler_img('qui_image');">
				<p>qui est-ce ?</p>
			</div>
		</div>

et le CSS qui va avec "qui" :

Code:

1
2
3
4
5
			#qui {position:absolute; left:120px; top:250px; z-index:2;}
			#qui span {position:absolute; height:70px; width:108px; cursor:pointer;}
			#qui_image {position:absolute; background:url(www/lips.png); height:70px; width:108px; display:block; z-index:1;}
			#qui_spoiler {display:none;}
			#qui_spoiler span {text-shadow:2px 2px 2px #900; width:400px; margin-left:-30px;}

Merci de votre aide.

12/04/2008, 03h31
marts

Code:

onClick="spoiler_text('qui_spoiler'); spoiler_img('qui_image');"
12/04/2008, 10h31
Gunner4902

Il y a en effet deux actions.
Le problème est que lors du premier clic, aucune action ne se passe et que lors du second clic les deux actions se produisent.

Comment faire pour qu'un seul clic soit nécessaire (ce qui serait nettement plus pratique et intuitif !) ?
Merci
12/04/2008, 10h50
Jumano
Bonjour,
Effectivement deux clics sont nécessaires ...
Tu peux peut être rajouter ceci dans la balise <body> :
Code:

1 2 <body onload="spoiler_text('qui_spoiler'); spoiler_img('qui_image');">
12/04/2008, 11h12
Gunner4902

Merci Jumano, celà règle en effet le problème :)

Par contre j'ai une petite question qui rebondit sur ta solution. J'utilise plusieurs spoilers différents dans ma page. Dois je les appeller un par un, ou faire un code générique comme dans le JS :

Code:

<body onload="spoiler_text(nom_div); spoiler_img(nom_div)">

(mais celà ne semble pas fonctionner avec ma syntaxe…)

Merci
12/04/2008, 11h29
Jumano

Effectivement le mieux serait de trouver la bonne syntaxe pour réduire ton code dans le <onload>, mais malheuresement je ne suis pas assez calé en Javascript pour te la donner.
Sinon comme tu le dis tu peux toujours indiquer un à un tous tes "spoilers" en attendant le passage d'une âme charitable qui connaisse la bonne syntaxe ;)
12/04/2008, 11h33
Gunner4902

Citation:

Envoyé par jumano

Effectivement le mieux serait de trouver la bonne syntaxe pour réduire ton code dans le <onload>, mais malheuresement je ne suis pas assez calé en Javascript pour te la donner.
Sinon comme tu le dis tu peux toujours indiquer un à un tous tes "spoilers" en attendant le passage d'une âme charitable qui connaisse la bonne syntaxe ;)

C'est ce que j'ai fait.
Merci Jumano :)

bonjour,

en fait par ce biais :
Code:

1 2 document.getElementById(nom_div).style.display
Tu n'accèdes pas à la propriété display définie dans ta feuille de style.

Au démarrage, cette propriété ne renvoie rien (ni none, ni block, ni même null).
C'est lorsque tu appelles une première fois ton script que tu affectes à display une valeur (block ou none).

Un petit exemple :
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 <html> <head> <title></title> <style type="text/css">  </style> <script type="text/javascript"> function proprieteDiv() { var v1 = document.getElementById("test1").style.display; var v2 = document.getElementById("test2").style.display; var v3 = document.getElementById("test3").style.display; alert("div 1 : " + v1 + "\ndiv 2 : " + v2 + "\ndiv3 : " + v3); alert("Affectation du style sur le div 3"); document.getElementById("test3").style.display = "block"; v3 = document.getElementById("test3").style.display; alert("Nouvelles valeurs :\ndiv 1 : " + v1 + "\ndiv 2 : " + v2 + "\ndiv3 : " + v3); } </script> </head> <body onload="proprieteDiv()"> <div id="test1"> test 1 </div> <div id="test2" style="display: block"> test 2 </div> <div id="test3"> test 3 </div> </body> </html>
sur test1 le style est défini dans la CSS :fleche: la valeur est inaccessible ;
sur test2 le style est défini "en ligne" avec l'attribut style dans la balise div :fleche: tu peux lire la valeur du style ;
sur test3 le style est défini dans le script : tant que tu ne lui donnes pas de valeur (première fenêtre alert) display ne contient rien. Mais dès que tu détermines une valeur dans le script, tu peux lire son contenu

Donc ce que tu peux faire : dès le chargement de la page (événement onload) affecter à la propriété display de tous éléments une valeur par défaut comme te le propose jumano.

13/04/2008, 23h41
Gunner4902

Citation:

Envoyé par Auteur

Donc ce que tu peux faire : dès le chargement de la page (événement onload) affecter à la propriété display de tous éléments une valeur par défaut comme te le propose jumano.

Ok, merci pour cette explication :)
Pour ce que Jumano a proposé, je suis ok, mais peut-on condenser la syntaxe, ou faut il faire une déclaration au cas par cas ?