Error Function within a loop

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.

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

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

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

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); }

---

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

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>

---

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

merci beaucoup.