addeventListener avec click

Version imprimable

Bonjour à tous/toutes,

j'ai un soucis dans mon code vous vous en doutiez j'en étais sûr. Mon soucis est le suivant j'aimerais qu'en cliquant sur l'image il y ait l'apparition d'une SEULE et unique autre image. Cependant en cliquant on peut en faire apparaître à l'infini. Ce malgré ma variable alreadyClick. je vous laisse jeter un coup d'oeil dans mon code PS: je débute pleinement.

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
 
<!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" xml:lang="fr" >
   <head>
       <title>Bienvenue</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
       <link rel="stylesheet" media="screen" type="text/css" title="Design" />
   </head>
 
  <body id="baba">
	<div>
			<img id="image" src="images/bfra/bb/boissonsSucrees.jpg" alt="boubiboulga" title="boubiboulga" style="width: 100px; height: 100px"/>
	</div>
 
    <script type="text/javascript">
		var image = document.getElementById('image');
 
		if (alreadyClick != 1)
		{
		image.addEventListener('click', function(){
		var newdiv = document.createElement('div');
		var text = document.createElement('img');
		 text.src="images/bfra/bb/boissonsSucrees.jpg" ;
		 text.alt="boubiboulga" ;
		 text.title="boubiboulga";
		newdiv.appendChild(text);
		document.getElementById("baba").appendChild(newdiv);
		}, false);
		var alreadyClick = 1;
		}
 
    </script>
  </body>
</html>

d'avance merci à ceux qui prendront du temps pour jeter un oeil ;)

Tu dois mettre ta condition dans la fonction.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script type="text/javascript">
	var image = document.getElementById('image');
 	var alreadyClick = 0;
	image.addEventListener('click', function(){
		if (alreadyClick != 1)
		{
			var newdiv = document.createElement('div');
			var text = document.createElement('img');
			text.src="images/bfra/bb/boissonsSucrees.jpg" ;
			text.alt="boubiboulga" ;
			text.title="boubiboulga";
			newdiv.appendChild(text);
			document.getElementById("baba").appendChild(newdiv);
			alreadyClick = 1;
		}
	}, false);
</script>

Sinon ce que tu peux aussi faire, c'est écouter l'événement et supprimer cette "écoute" une fois que ta condition est remplie.

14/09/2011, 11h34
helkøwsky

hello m.pringle,

merci pour ton aide. Par soucis de curiosité comment je fais "écouter l'événement" puis "supprimer l'écoute" ?

De rien, pour "écouter" un événement, c'est la fonction que tu as utilisé "addEventListener", qui "écoute" lors du clic et lance ta fonction, tu peux utiliser son inverse "removeEventListener" qui fonctionne sur le même modèle.

Ici cela donnerait quelque chose comme ça je pense :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <script type="text/javascript"> var image = document.getElementById('image'); var alreadyClick = 0; var maFonction = function(){ var newdiv = document.createElement('div'); var text = document.createElement('img'); text.src="images/bfra/bb/boissonsSucrees.jpg" ; text.alt="boubiboulga" ; text.title="boubiboulga"; newdiv.appendChild(text); document.getElementById("baba").appendChild(newdiv); image.removeEventListener('click', maFonction, false); }; image.addEventListener('click', maFonction, false); </script>
TU n'as plus besoin de la condition vu que la fonction n'est exécutée qu'une seule fois.

PS. Je ne sais pas trop si on utilise le verbe écouter ou un autre, c'est de la traduction littérale. :)