Boucle for et fonction

Version imprimable

Bonjour,

j'ai un soucis avec mon code et je me demande si cela ne vient pas de l'attribution dans une fonction d'une variable issue de la boucle for voici mon code :

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
 
		for(i=1;i<=3;i++)
		{
			if(document.getElementById(i)!=null)
			{
				map_bouton[i] = document.getElementById(i);
				map_appear[i] = document.getElementById(i+'b');
				addEventSimple(map_bouton[i], 'mouseover', function()
				{
					map_appear[i].style.zIndex = '90';
					text_affichage = '&nbspChancy';
					text_affichage_prix = '<span style="color:red;">&nbspZone non delivrée</span>';
					zone_affichage.innerHTML = text_affichage;
					zone_affichage_prix.innerHTML = text_affichage_prix;
				}
				);
				addEventSimple(map_bouton[i], 'mouseout', function()
				{
					map_appear[i].style.zIndex = '70';
					text_affichage = '&nbsp-';
					text_affichage_prix = '&nbsp-';
					zone_affichage.innerHTML = text_affichage;
					zone_affichage_prix.innerHTML = text_affichage;
				}
				);
			}
		}

Quand je test avec firebug il me dit :
"map_appear[i] is undefined"
et c'est justement celui que j'ai mis dans la fonction.

voici le html si toutefois:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
				<Map name="carte_gva">
				<area id="1" shape="poly" coords="10,422,10,415,26,401,23,388,38,356,53,357,70,334,79,332,103,345,72,365,60,369,50,384,48,401,38,413,31,414,24,419,15,417,10,422" >
				<area id="2" shape="poly" coords="39,356,51,325,54,331,59,331,63,320,68,317,82,321,92,318,101,328,106,343,102,345,80,331,71,332,52,355,39,356">
				<area id="3" shape="poly" coords="51,388,56,373,65,369,73,366,106,346,105,355,101,367,112,368,120,375,109,393,97,390,75,390,66,386,51,388">
				</Map>
				<img id="map_gva" src="image/geneve/carte_gva.png" usemap="#carte_gva" style="position:absolute; top:0px; left:0px; z-index:95; ">
 
 
				<img id="1a" src="image/geneve/chancy.png" style="position:absolute;  left:11px; top:333px; z-index:80;">
				<img id="1b" src="image/geneve/chancy_hover.png" style="position:absolute;  left:11px; top:333px; z-index:70;">	
 
				<img id="2a" src="image/geneve/avully.png" style="position:absolute;  left:41px; top:317px; z-index:80;">
				<img id="2b" src="image/geneve/avully_hover.png" style="position:absolute;  left:41px; top:317px; z-index:70;">
 
				<img id="3a" src="image/geneve/avusy.png" style="position:absolute;  left:51px; top:346px; z-index:80;">
				<img id="3b" src="image/geneve/avusy_hover.png" style="position:absolute;  left:51px; top:346px; z-index:70;">

merci d'avance à ceux qui prendront le temps de répondre.

20/01/2012, 18h11
NoSmoking

Bonjour,
un grand classique de chez classique, une solution ce trouve dans
:faq: http://javascript.developpez.com/faq...lick.dynamique

hello,

merci de ta réponse rapide j'ai donc un code qui fonctionne :

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
 
		if(document.getElementById('map_gva')!=null)
		{	
			var map = document.getElementById('map_gva');
			var zone_affichage = document.getElementById('lvr_zone');
			var zone_affichage_prix = document.getElementById('lvr_zone_prix');
			var map_bouton = [];
			var map_appear = [];
		//chancy
		for(i=1;i<=3;i++)
		{
			if(document.getElementById(i)!=null)
			{
				map_bouton[i] = document.getElementById(i);
				map_appear[i] = document.getElementById(i+'b');
				map_bouton[i].indice = i;
				map_bouton[i].addEventListener('mouseover', function()
				{
					i = this.indice;
					map_appear[i].style.zIndex = '90';
					text_affichage = '&nbspChancy';
					text_affichage_prix = '<span style="color:red;">&nbspZone non delivrée</span>';
					zone_affichage.innerHTML = text_affichage;
					zone_affichage_prix.innerHTML = text_affichage_prix;
				}
				);
				map_bouton[i].addEventListener('mouseout', function()
				{
					i = this.indice;
					map_appear[i].style.zIndex = '70';
					text_affichage = '&nbsp-';
					text_affichage_prix = '&nbsp-';
					zone_affichage.innerHTML = text_affichage;
					zone_affichage_prix.innerHTML = text_affichage;
				}
				);
			}
		}
		}

le bémol c'est que je n'ai plus ma fonction de compatibilité entre navigateur. j'ai aussi vu d'autre solution avec un return function
http://blog.jbrantly.com/2010/04/cre...on-inside.html

Je voulais juste savoir si il était possible de trouver une manière de faire avec une fonction, et non pas le simple ajout "addEventListener" ?

si ce n'est pas possible je ferais un contrôle dans ma boucle.

Citation:

Je voulais juste savoir si il était possible de trouver une manière de faire avec une fonction, et non pas le simple ajout "addEventListener" ?

tu peux mettre directement la fonction sur les événements

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
  var oElem, i = 1;
  while( ( oElem = document.getElementById( i)){
    map_bouton[i] = oElem;
    map_appear[i] = document.getElementById( i +'b');
    map_bouton[i].indice = i;
 
    map_bouton[i].onmouseover = function(){
      map_appear[this.indice].style.zIndex = 90; // zIndex doit être un Number
      zone_affichage.innerHTML = '&nbspChancy';
      zone_affichage_prix.innerHTML = '<span style="color:red;">&nbspZone non delivrée</span>';
    };
 
    map_bouton[i].onmouseout = function(){
      map_appear[this.indice].style.zIndex = 70; // zIndex doit être un Number
      zone_affichage.innerHTML = '&nbsp-';
      zone_affichage_prix.innerHTML = '&nbsp-';
    });
    i++;
  }

21/01/2012, 15h21
helkøwsky

merci, ça joue parfaitement.

une question se pose quand même, as tu besoin dans le reste de ton code des map_bouton[i] et des map_appear = [];, car dans ce cas tu peux faire du parfaitement trivial à savoir

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
  var oElem, i = 1;
  while( ( oElem = document.getElementById( i)){
    oElem.onmouseover = function(){
      document.getElementById( this.id +'b').style.zIndex = 90;
      zone_affichage.innerHTML = '&nbspChancy';
      zone_affichage_prix.innerHTML = '<span style="color:red;">&nbspZone non delivrée</span>';
    };
 
    oElem.onmouseout = function(){
      document.getElementById( this.id +'b').style.zIndex = 70;
      zone_affichage.innerHTML = '&nbsp-';
      zone_affichage_prix.innerHTML = '&nbsp-';
    });
    i++;
  }