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

Gunner4902 · 12/04/2008, 00h17

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 :

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

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

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.

**marts** · 12/04/2008, 03h31

Code :

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

onClick="spoiler_text('qui_spoiler'); spoiler_img('qui_image');"

Gunner4902 · 12/04/2008, 10h31

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

**Jumano** · 12/04/2008, 10h50

Bonjour,
Effectivement deux clics sont nécessaires ...
Tu peux peut être rajouter ceci dans la balise <body> :

Code :

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

1
2
 
<body onload="spoiler_text('qui_spoiler'); spoiler_img('qui_image');">

Gunner4902 · 12/04/2008, 11h12

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 :

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

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

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

Merci

**Jumano** · 12/04/2008, 11h29

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

Gunner4902 · 12/04/2008, 11h33

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

**Auteur** · 13/04/2008, 15h50

bonjour,

en fait par ce biais :

Code javascript :

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

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 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
45
46
 
<html>
<head>
<title></title>
<style type="text/css">
<!--
#test1{
 display: block;
}
-->
</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 la valeur est inaccessible ;
sur test2 le style est défini "en ligne" avec l'attribut style dans la balise div 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.

Gunner4902 · 13/04/2008, 23h41

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 ?

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

JavaScript

Discussions similaires

Partager

Partager