addeventListener avec click

**helkøwsky** · 14/09/2011, 01h36

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 :

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

**MrPringle** · 14/09/2011, 08h32

Tu dois mettre ta condition dans la fonction.

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

**helkøwsky** · 14/09/2011, 11h34

hello m.pringle,

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

**MrPringle** · 15/09/2011, 06h43

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 :

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

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.

addeventListener avec click

JavaScript

Discussions similaires

Partager

Partager