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