Error Function within a loop [Résolu]

[helkøwsky]

C'est encore moi :-),

Mettre des fonctions dans des loops c'est interdit, j'ai bien compris sauf que je sèche pour réinterpréter mon code autrement. Voici mon code complet :

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
 
     <script type="text/javascript">
	// Compatibilité du onclik sur les différents browser
	function addEventSimple(obj,evt,fn){
				if (obj.addEventListener)
					obj.addEventListener(evt,fn,false);
				else if (obj.attachEvent)
					obj.attachEvent('on'+evt,fn);
			}
	// Récupère toutes les images avec un id commencant par image_sousmenu[i] ou i commence à 0 cf php-menubdd_membre_image.php($x en php)
	 mes_images = document.getElementsByTagName('img');
	 var nombre_images = 0;
	 for (i = 0;i < mes_images.length; i++)
	 {
		if (mes_images[i].id.indexOf('image_sousmenu')!=-1)
		{
			nombre_images += 1;
		}
	 }
	// on créé la balise qui contiendra les images
		newdiv = document.createElement('div');
		newdiv.id = 'conteneur_image_splash';
		// on lui attribue les propirétés css
		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)';
	// On a le nombre d'image commencant par sousmenu et on les enregistre dans images_triees pour récupérer leurs propriétés et on crée les images en grand
	for(y = 0;y < nombre_images.length; y++)
	{
		images_triees[y] = document.getElementByID('image_sousmenu'+y);
		addEventSimple(images_triees[y],'click', fonction()
		{
		images_splash[y] = document.createElement('img');
		// On récupère les attribut src alt & title de l'image de base
		images_splash[y].style.src = images_triees[y].src;
		images_splash[y].style.alt = images_triees[y].alt;
		images_splash[y].style.title = images_triees[y].title;
		// on crée les propriété CSS
		images_splash[y].style.position = 'absolute';
		images_splash[y].style.width = '400px';
		images_splash[y].style.height = '400px';
		images_splash[y].style.marginLeft = '-200px'; //les marges -200 permettent de centrer l'image (1/2 de la taille)
		images_splash[y].style.marginTop = '-200px';
		images_splash[y].style.top = '50%';
		images_splash[y].style.left = '50%';
		// on inclut l'image dans la balise div créé plus haut
		newdiv.appendChild(images_splash[y]);
		// on inclut la balise div dans la balise body
		balise_body = document.getElementsByTagName('body');
		balise_body[0].appendChild(newdiv);
		});
	}

Et voici la partie qui ne va pas. L'idée du code c'est de récupérer toutes les balise <img> ayant un id commencent par "image_sousmenu". Une fois que c'est fait on récré des balises <img> avec la même image de taille différente que l on inclue dans une balise <div> qui elle même sera inclue dans la balise <bod>. Mais ceci ne se produit que lorsque l'on a cliqué sur une des image de base. donc j'ai mis mon évènement dans un loop car je ne vois pas comment faire autrement.

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
 
for(y = 0;y < nombre_images.length; y++)
	{
		images_triees[y] = document.getElementByID('image_sousmenu'+y);
		addEventSimple(images_triees[y],'click', fonction()
		{
		images_splash[y] = document.createElement('img');
		// On récupère les attribut src alt & title de l'image de base
		images_splash[y].style.src = images_triees[y].src;
		images_splash[y].style.alt = images_triees[y].alt;
		images_splash[y].style.title = images_triees[y].title;
		// on crée les propriété CSS
		images_splash[y].style.position = 'absolute';
		images_splash[y].style.width = '400px';
		images_splash[y].style.height = '400px';
		images_splash[y].style.marginLeft = '-200px'; //les marges -200 permettent de centrer l'image (1/2 de la taille)
		images_splash[y].style.marginTop = '-200px';
		images_splash[y].style.top = '50%';
		images_splash[y].style.left = '50%';
		// on inclut l'image dans la balise div créé plus haut
		newdiv.appendChild(images_splash[y]);
		// on inclut la balise div dans la balise body
		balise_body = document.getElementsByTagName('body');
		balise_body[0].appendChild(newdiv);
		});
	}

D'avance merci à ceux qui se pencheront sur mon problème.

[RomainVALERI]

Mais : quel est le problème avec des fonctions dans une boucle ?

Tu parles des appels ou des déclarations de fonctions ?

[NoSmoking]

Bonsoir,
je pense que cette lecture devrait t'aider
http://javascript.developpez.com/faq...lick.dynamique

[galerien69]

salut,

la variante :

Code :

1
2
3
4
5
6
for(var y=...){
 (function(id){
   //ici considérer id=y
   images_triees[id] = document.getElementByID('image_sousmenu'+id);...
 })(y);
}

[helkøwsky]

@RomainVALERI: j'utilise ceci pour tester mes codes http://jsbin.com/#javascript,html et il me sortait une erreur no function within a loop. Cependant il le fait même avec le code donné dans le tuto par Nosmoking.

@Nosmoking : j'ai lu le tuto et apparement tu as raison ca doit pas gêner

@galerien69 : je comprend ton code et je pense que mon erreur vient de là, cependant comment je fais si ma fonction est dans une autre fonction pour récupérer les variable "images_splash[y]" dans cette fonction qui est dans la boucle mon code sera plus clair.

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
// compatibilité entre les naviguateur
	function addEventSimple(obj,evt,fn){
				if (obj.addEventListener)
					obj.addEventListener(evt,fn,false);
				else if (obj.attachEvent)
					obj.attachEvent('on'+evt,fn);
			}
// Ajout des Evénements click sur chacun des images
 
	for(y = 0;y < 2; y++)
	{
		images_triees[y] = document.getElementById('image_sousmenu'+y);
		images_splash[y] = document.createElement('img');
		addEventSimple(images_triees[y],'click', function (){
		newdiv.appendChild(images_splash[y]);
		}
// [...]
}

en fait je crois que la fonction ne récupère pas les bonnes variables (le dernier "images_splash[y]" et je vois pas comment faire ta méthode puisque c'est déjà dans une focntion.

[Eric2a]

Salut,

Essaie ceci...

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
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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!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>Test</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script type="text/javascript">
		// Variables globales
		var
			images=[],conteneur;
 
		// Compatibilité du onclik sur les différents browser
		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 des vignettes
		function image_Show(event){
			var thumb,img,balise_body;
 
			// Déterminer quelle vignette a été cliquée
			if(!event)event=window.event;
			thumb=event.target||event.srcElement;
 
			// On créé une nouvelle image
			img=document.createElement('img');
			// On récupère les attribut src alt & title de la vignette
			img.src = thumb.src;
			img.alt = thumb.alt;
			img.title = thumb.title;
 
			// On crée les propriété CSS
			img.style.position = 'absolute';
			img.style.width = '400px';
			img.style.height = '400px';
			img.style.marginLeft = '-200px'; //les marges -200 permettent de centrer l'image (1/2 de la taille)
			img.style.marginTop = '-200px';
			img.style.top = '50%';
			img.style.left = '50%';
 
			// On vide le conteneur...
			while(conteneur.hasChildNodes())conteneur.removeChild(conteneur.lastChild);
			// pour y ajouter l'image
			conteneur.appendChild(img);
 
			// On ajoute le conteneur dans le document
			balise_body = document.getElementsByTagName('body')[0];
			balise_body.appendChild(conteneur);
		}
 
		// Gestionnaire d'évenement onclick du conteneur
		function image_Hide(){
			// On vide le conteneur...
			while(conteneur.hasChildNodes())conteneur.removeChild(conteneur.lastChild);
			// On le supprime du document
			conteneur.parentNode.removeChild(conteneur);
		}
 
		// Initialisation
		function init(){
			var
				i,list=document.getElementsByTagName('img');
 
			// Récupère un tableau de réferences des images avec un id commencant par image_sousmenu[i] (ou i commence à 0) dans images
			if(list){
				for(i=0;i<list.length;i++){
					if(/^image_sousmenu[0-9]+$/.test(list[i].id))
						images.push(list[i]);
				}
			}
			if(images.length==0)return; // Pas d'image... Rien à faire.
 
			// On créé le conteneur
			conteneur = document.createElement('div');
			conteneur.id = 'conteneur_image_img';
 
			// On lui attribue les propriétés CSS
			conteneur.style.zIndex = '95';
			conteneur.style.position = 'absolute';
			conteneur.style.top = '0px';
			conteneur.style.left = '0px';
			conteneur.style.width = '100%';
			conteneur.style.height = '100%';
			conteneur.style.backgroundImage = 'url(image/permanente/fond_translucide.png)';
 
			// On lui ajoute le gestionnaire d'évenement onclick
			addEventSimple(conteneur,'click',image_Hide);
 
			// On parcourt le tableau des images trouvées afin de leur ajouter le gestionnaire d'évenement onclick
			for(i in images){
				images[i].style.cursor='pointer';
				addEventSimple(images[i],'click',image_Show);
			}
		}
 
		// Appel de la fonction init() une fois le document chargé
		window.onload=init;
	</script>
</head>
 
<body>
	<div>
		<img id="image_sousmenu0" src="img1.jpg" alt="Image 1" width="80" height="80" />
		<img id="image_sousmenu1" src="img2.jpg" alt="Image 2" width="80" height="80" />
		<img id="image_sousmenu2" src="img3.jpg" alt="Image 3" width="80" height="80" />
	</div>
</body>
</html>

[helkøwsky]

Wahou, c'est beau propre et très bien expliqué.

merci beaucoup.