appendchild & removechild

**helkøwsky** · 14/09/2011, 13h29

Bonjour à tous,

en fait j'ai un code javascript qui une fois que l'on clique sur l'image une fonction reprend cette dernière la copie et la met en grand au milieu de l'écran avec un appendchild. Jusqu'à là tout va bien. Maintenant je voudrais lorsque l'on clique en dehors de cette image agrandie, ça enlevé ce qui a été mis par la première fonction mais je n'y parviens pas. Sachant que les deux code fonctionne très bien séparément, je pense que c'est dans le raisonnement que je suis faux donc si vous avez des pistes je suis preneur voici pour le 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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
 
<!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 id="bobo">
			<img id="image" src="images/bfra/bb/boissonsSucrees.jpg" alt="boubiboulga" title="boubiboulga" style="width: 100px; height: 100px"/>
	</div>
 
    <script type="text/javascript">
			// code - 1
			//implémente en cas de click sur l image
		var image = document.getElementById('image');
		var alreadyClick = 0;
		image.addEventListener('click', function(){
			if (alreadyClick != 1)
				{
						// Création de la div avec les propriétés CSS
						var newdiv = document.createElement('div');
							newdiv.style.zIndex = '95';
							newdiv.style.position = 'absolute';
							newdiv.style.top = '0px';
							newdiv.style.left = '0px';
							newdiv.style.width = '100%';
							newdiv.style.height = '100%';
							newdiv.style.backgroundImage = 'url(image/permanente/fond_translucide.png)';
							newdiv.id = 'bebe';
						// Création de l'image avec les propriétés CSS
						var image = document.createElement('img');
							image.style.position = 'absolute';
							image.style.width = '400px';
							image.style.height = '400px';
							image.style.marginLeft = '-200px'; //les marges -200 permettent de centrer l'image (1/2 de la taille)
							image.style.marginTop = '-200px';
							image.style.top = '50%';
							image.style.left = '50%';
							image.src='images/bfra/bb/boissonsSucrees.jpg' ;
							image.alt='boubiboulga' ;
							image.title='boubiboulga';
						newdiv.appendChild(image);
						document.getElementById("baba").appendChild(newdiv);
						alreadyClick = 1;
				}
		}, false);
		// code 2
		// Annule l'implémentation en cas de click sur le div de l'implémentation
		var deletediv = document.getElementById('bebe');
		deletediv.addEventListener('click', function(){
			document.getElementById('baba').removeChild(deletediv);
                        alreadyClick = 0;
			}, false);
    </script>
  </body>
</html>

je crois que je n'arrive pas à recupérer avec getElementById la div implémentée en javascript dans le code 1.

d'avance merci à ceux qui prendront du temps pour m'aider

**NoSmoking** · 14/09/2011, 18h34

Bonjour,
pourquoi détruire ce que l'on vient de créer pour le recréer et le détruire?

Tu testes si non existant on le créer sinon on le modifie, ou l'image qu'il contient et lorsque l'on en a plus l'utilité on le passe en display:none.

**helkøwsky** · 14/09/2011, 20h26

ah voilà,

donc en fait je faisais fausse route il suffit de le passer en display none dans ma deuxième fonction. C'est juste que dans ma logique pour le faire apparaître je le met et le faire disparaître je le détruit un peu comme une fenêtre pop up que tu ouvre et que tu fermes enfin c'est comme cela que je voyais la chose.

Mais le fond du problème en fait vient du fait que j'arrive pas à récupérer ma balise div insérée avec createElement et mise en place avec appendChild dans ma deuxième fonction

**Eric2a** · 14/09/2011, 22h35

Salut,

La balise <div id="bebe"> n'est créée qu'une fois la vignette cliquée, c'est pour cette raison que la variable deletediv ne réference rien.

Il faut donc créer le gestionnaire d'évenements de la balise <div id="bebe"> au moment de sa création.

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!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" />
		<style type="text/css" media="screen">
			#bebe{
				zIndex=95;
				position:absolute;
				left:0;top:0;
				width:100%;height:100%;
				background-image:url('image/permanente/fond_translucide.png');
			}
			.splashscreen{
				position:absolute;
				left:50%;top:50%;
				width:400px;height:400px;
				margin-left:-200px; /* les marges -200 permettent de centrer l'image (1/2 de la taille) */
				margin-top:-200px;
			}
		</style>
	</head>
 
	<body id="baba">
		<div id="bobo">
			<img id="image" src="images/bfra/bb/boissonsSucrees.jpg" alt="boubiboulga" title="boubiboulga" style="width: 100px; height: 100px" />
		</div>
 
		<script type="text/javascript">
			function addEventSimple(obj,evt,fn){
				if (obj.addEventListener)
					obj.addEventListener(evt,fn,false);
				else if (obj.attachEvent)
					obj.attachEvent('on'+evt,fn);
			}
 
			// Gestionnaire d'évenement onclick de l'image (vignette)
			addEventSimple(
				document.getElementById('image'),
				'click',
				function(){
					if(!this.theDiv){
						// Création de la div (id=bebe)
						this.theDiv=document.createElement('div');
						this.theDiv.id='bebe';
 
						// Création de l'image (class=splashscreen)
						var image = document.createElement('img');
						image.src='images/bfra/bb/boissonsSucrees.jpg' ;
						image.className='splashscreen';
						image.alt='boubiboulga' ;
						image.title='boubiboulga';
 
						this.theDiv.appendChild(image);
						document.getElementById("baba").appendChild(this.theDiv);
 
						// Gestionnaire d'évenement onclick du div de l'implémentation
						addEventSimple(
							this.theDiv,
							'click',
							function(){
								this.theDiv.style.display='none';
								return false;
							}
						);
					}
					this.theDiv.style.display='block';
					return false;
				}
			);
		</script>
	</body>
</html>

La fonction addEventSimple() permet la création de gestionnaires d'évenements multi-navigateurs.

**helkøwsky** · 15/09/2011, 00h48

hello eric2a,

je comprend plus ou moins le code que tu m'as fourni cependant je bug après bien des recherches sur le net sur le "this" - fait référence à l'objet courant ... ok. Comment il interprète par exemple:

Code :

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

1
2
 
if(!this.theDiv)

il teste sa non existence mais c'est quoi this.thedive ?
ou alors ici

Code :

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

1
2
 
this.theDiv=document.createElement('div');

je comprend que l 'on attribue à this.theDiv la création d une balise div mais c'est quoi encore une fois ce this, il sera interprété comment. Je sèches donc si tu as une explication ou même un Tutorial je suis preneur.

Et seconde question pourquoi la fonction retourne false ?

je te remercie d'avance pour tes lumières :-)

**Eric2a** · 15/09/2011, 14h01

Je ne saurais pas t'expliquer comme il faudrait toutes les "subtilités" du mot-clé this. En fait ici, il permet de déclarer la variable à l'interieur de la fonction et ne pas perdre sa valeur ensuite.

J'aurais tout simplement utilisé une variable globale ça aurait été plus simple finalement.

Comme si j'avais fait dans ce exemple simplifié...

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
// Déclaration de la variable globale
var div;
 
// Gestionnaire d'évenement onclick de l'image (vignette)
document.getElementById('image').onclick=function(){
	if(!div){
		// Création de la div (id=bebe)
		div=document.createElement('div');
		div.id='bebe';
 
		// Gestionnaire d'évenement onclick du div de l'implémentation
		div.onclick=function(){
			div.style.display='none';
		};
 
		// Création de l'image (class=splashscreen)
		var img=document.createElement('img');
		img.src='images/bfra/bb/boissonsSucrees.jpg' ;
		img.className='splashscreen';
		img.alt='boubiboulga' ;
		img.title='boubiboulga';
 
		// Ajoute le tout dans l'arbre DOM
		div.appendChild(img);
		img=null;
		document.getElementById('baba').appendChild(div);
	}
	div.style.display='block';
};

Pour le return false;, c'est par habitude... Ca fonctionne même sans.

**helkøwsky** · 15/09/2011, 16h36

et bien décidément tu vas devenir mon mentor tu n'arrêtes pas de m'éclairer dans mes post je t'en remercie ça m'aide grandement dans la compréhension du javascript.

**NoSmoking** · 15/09/2011, 21h53

concernant this, il y a sur ce site, http://t-templier.developpez.com/tut...ipt-poo1/#L2.3, le reste est tout autant intéressant.

ici je le mettrait

Code :

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

1
2
3
4
// Gestionnaire d'évenement onclick du div de l'implémentation
div.onclick = function(){
  this.style.display='none';
};

**helkøwsky** · 21/09/2011, 14h55

merci pour le liens j'avais un peu cherché mais pas assez apparemment sur le site, je suis en pleine lecture

appendchild & removechild

JavaScript

Discussions similaires

Partager

Partager