[IE] Boucle for, truc de fou

**d-Rek** · 13/12/2007, 12h23

Bonjour à tous,

Ca fait une heure que j'essaye de débugger ce satané code IE.
Tout fonctionne sous FF comme d'hab.
Sous IE 7, c'est surprenant !

Voici mon code optimisé IE :

Code Javascript :

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
var tab=new Array();
var tab_img=new Array('ac', 'pk', 'bp', 'ht');
 
function zoom(container, maxWidth, maxHeight, minWidth, minHeight){
	for(var i=0; i<tab_img.length; i++){
		tab[i]=false;
		var newimg=document.createElement('img');
		newimg.setAttribute('src', 'img/'+tab_img[i]+'.gif');
		newimg.setAttribute('id', 'img'+i);
		newimg.style.setAttribute('cssText', 'width:'+minWidth+'px; height:'+minHeight+'px;');
		newimg.setAttribute("onclick", function(){alert('Play '+i);});
		document.getElementById(container).appendChild(newimg);
	}
}
window.onload=function(){	
	zoom('area', 68, 107, 34, 54);
}

Dans mon HTML, j'ai juste

Code HTML :

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

<div id="area"></div>

Donc toutes mes images ont un onclick="alert('Play 4');" !!?
C'est fou.. je me suis lu et relu. Je vois pas où j'ai merdé.

**E.Bzz** · 13/12/2007, 12h38

Bonjour,

Code :

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

1
2
3
4
5
6
7
var newimg=document.createElement('img');
newimg.setAttribute('src', 'img/'+tab_img[i]+'.gif');
newimg.setAttribute('id', 'img'+i);
newimg.style.setAttribute('cssText','width:'+minWidth+'px;height:'+minHeight+'px;');
newimg.setAttribute("onclick", function(){alert('Play '+i);});
document.getElementById(container).appendChild(newimg);
document.getElementById('img'+i).onclick = function(){alert('Play '+i);};

A+

**Shinuza** · 13/12/2007, 13h36

Euh, à moins que je ne me trompe, ça ne changera rien. Javascript étant synchrone c'est la dernière valeur de la boucle qui sera affectée à tous les élements.

Code :

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

1
2
3
4
5
		document.getElementById('img'+i).onclick = function(num) {
			return function(){
				alert('Play '+num);
			};
		}(i);

**SpaceFrog** · 13/12/2007, 13h54

j'ai déja collé un truc sur ça dasn la FAQ ...

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
for(var i=0; i<tab_img.length; i++){
		tab[i]=false;
		var newimg=document.createElement('img');
		newimg.src= 'img/'+tab_img[i]+'.gif';
                newimg.indice=i;
		newimg.id='img'+img.indice;
		newimg.style.cssText='width:'+minWidth+'px; height:'+minHeight+'px;';
		newimg.onclick=function(){alert('Play '+this.indice);});
		document.getElementById(container).appendChild(newimg);
	}

**E.Bzz** · 13/12/2007, 14h24

Envoyé par SpaceFrog

j'ai déja collé un truc sur ça dasn la FAQ ...

Il me semblait, mais j'ai pas retrouvé

**SpaceFrog** · 13/12/2007, 14h30

ou dans les contributions ?

**d-Rek** · 13/12/2007, 14h33

Il n'y a que la méthode Shinuza qui fonctionne..
Merci les mecs !

Bon désolé mais je donne le point à Shinuza.

**SpaceFrog** · 13/12/2007, 14h49

Oui bon une paire de coquilles dasn le script ...

mais ça marche ... pour preuve :

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
<script type='text/javascript'>
function MyRandomMess(){
var tab_img=new Array(10); 
 
for(i=0; i<tab_img.length; i++){
		var newimg=document.createElement('div');
       newimg.indice=i;
		newimg.id='img'+newimg.indice;
		newimg.style.cssText='width:100px; height:100px;backgroundColor:red;border:solid 2px blue;';
		newimg.onclick=function(){alert('Play '+this.indice)};
		document.getElementById('container').appendChild(newimg);
	}
}
</script>
</head>
 
<body onload="MyRandomMess()">
<div id="container"></div>
</body>
 
</html>

**d-Rek** · 13/12/2007, 15h31

En recopiant ton code intégralement, j'avoue que ça fonctionne.
J'ai du oublier quelque chose en modifiant mon script tout à l'heure..

Je split le point donné Shinuza et je t'en file la moitié.

**Shinuza** · 13/12/2007, 15h38

Juste un truc, écrire dans les propriétés d'un HTMLElement est une des premières causes de leak sous IE. D'ou l'intérêt du bind ici, ou l'utilisation de forEach qui est un parfait walk-around pour ce genre de cas (et ça permet une approche un peu plus orientée "fonctionnel")