btn1[.]a la valeur Null ou n'est pas un objetRésolu/Fermé

Question

Bonjour,
J'ai besoin de vos consiels.
je débute en javascript. Je tente de faire marcher ce code : 

        var cpt_btn=0;
	do{
		btn1[cpt_btn]=document.createElement("img");
		btn1[cpt_btn].src=btn[cpt_btn].src_out;
		btn1[cpt_btn].className=btn[cpt_btn].class_name;
		btn1[cpt_btn].alt=btn[cpt_btn].alt;
		btn1[cpt_btn].onmouseover=function (cpt_btn){btn1[cpt_btn].src=btn[cpt_btn].src_over;}
		btn1[cpt_btn].onmouseout=function (cpt_btn){btn1[cpt_btn].src=btn[cpt_btn].src_out;}
		btn1[cpt_btn].onclick=function (cpt_btn){document.location=(btn[cpt_btn].cible);}
		menu.appendChild(btn1[cpt_btn]);
		cpt_btn++;
	}while (cpt_btn<btn.length)

ce script ne marche ni dans FireFox ni dans IE. Dans IE je recois le message btn1[...] a lavaleur Null ou n'est pas un objet.
Par contre quand je le fait sans la boucle ça marche cad:

       btn1[0]=document.createElement("img");
	btn1[0].src=btn[0].src_out;
	btn1[0].className=btn[0].class_name;
	btn1[0].alt=btn[0].alt;
	btn1[0].onmouseover=function (){btn1[0].src=btn[0].src_over;}
	btn1[0].onmouseout=function (){btn1[0].src=btn[0].src_out;}
	btn1[0].onclick=function (){document.location=(btn[0].cible);}
	menu.appendChild(btn1[0]);
	
	btn1[1]=document.createElement("img");
	btn1[1].src=btn[1].src_out;
	btn1[1].className=btn[1].class_name;
	btn1[1].alt=btn[1].alt;
	btn1[1].onmouseover=function (){btn1[1].src=btn[1].src_over;}
	btn1[1].onmouseout=function (){btn1[1].src=btn[1].src_out;}
	btn1[1].onclick=function (){document.location=(btn[1].cible);}
	menu.appendChild(btn1[1]);
	
	btn1[2]=document.createElement("img");
	btn1[2].src=btn[2].src_out;
	btn1[2].className=btn[2].class_name;
	btn1[2].alt=btn[2].alt;
	btn1[2].onmouseover=function (){btn1[2].src=btn[2].src_over;}
	btn1[2].onmouseout=function (){btn1[2].src=btn[2].src_out;}
	btn1[2].onclick=function (){document.location=(btn[2].cible);}
	menu.appendChild(btn1[2]);
        .......
        .......

Je sais que le problème est dans le passage du compteur cpt_btn aux fonctions anonymes.
Je vous remercie d'avance.

el_linwin · Accepted Answer

Bonjour Ebnou_Ljabal,

Le problème vient de la variable cpt_btn pour la raison suivante. Quand les fonctions anonymes sont créées, ce n'est pas la valeur de cpt_btn qui est transmise au corps des fonctions, mais la référence de la variable.

En d'autres termes, les fonctions anonymes des boutons vont réagir selon la valeur de cpt_btn au moment de leur invocation, et non au moment de leur création. C'est pour ça que lorsque vous passez par des constantes, cela marche.

Cordialement,
el_linwin

el_linwin · Answer

Bonjour Ebou_Ljabal,

Essayez dans votre boucle de formuler le code ainsi:

btn1[cpt_btn].onmouseover=function (){btn1[cpt_btn].src=btn[cpt_btn].src_over;}
btn1[cpt_btn].onmouseout=function (){btn1[cpt_btn].src=btn[cpt_btn].src_out;}
btn1[cpt_btn].onclick=function (){document.location=(btn[cpt_btn].cible);}

Cordialement,
el_linwin

Ebnou_Ljabal · Answer

Merci el_linwin.
En effet, c'est ce que j'ai utilisé en premier lieu(function() sans argument). Mais le résultat est le même. Et c'est après que j'ai introduis cpt_btn lors de l'appel de la fonction anonyme.

Ebnou_Ljabal · Answer

Une petite précision, c'est juste les lignes :

btn1[cpt_btn].onmouseover=function (){btn1[cpt_btn].src=btn[cpt_btn].src_over;}
btn1[cpt_btn].onmouseout=function (){btn1[cpt_btn].src=btn[cpt_btn].src_out;}
btn1[cpt_btn].onclick=function (){document.location=(btn[cpt_btn].cible);}

qui ne marchent pas. Les autres instructions fonctionnent bien.

Ebnou_Ljabal · Answer

J'ai bien compris.
Maintenant, comment dois-je faire pour que ça fonctionne??

el_linwin · Answer

Bonjour Ebnou_Ljabal,

Je vous suggère ce code:

function action_onmouseover(e)
{ var cnt=0;
  // Avec l'objet évènement récupéré dans 'e', on recherche le bouton concerné
  while (e.target!=btn1[cnt]) cnt++;
  // 'cnt' contient le numéro du bouton, on peut y aller
  btn1[cpt_btn].src=btn[cpt_btn].src_over;
}


function action_onmouseout(e)
{ var cnt=0;
  // Avec l'objet évènement récupéré dans 'e', on recherche le bouton concerné
  while (e.target!=btn1[cnt]) cnt++;
  // 'cnt' contient le numéro du bouton, on peut y aller
  btn1[cpt_btn].src=btn[cpt_btn].src_out;
}


function action_onclick(e)
{ var cnt=0;
  // Avec l'objet évènement récupéré dans 'e', on recherche le bouton concerné
  while (e.target!=btn1[cnt]) cnt++;
  // 'cnt' contient le numéro du bouton, on peut y aller
  document.location=(btn[cnt].cible);
}

var cpt_btn=0;
do{
 btn1[cpt_btn]=document.createElement("img");
 btn1[cpt_btn].src=btn[cpt_btn].src_out;
 btn1[cpt_btn].className=btn[cpt_btn].class_name;
 btn1[cpt_btn].alt=btn[cpt_btn].alt;
 btn1[cpt_btn].onmouseover=action_onmouseover;
 btn1[cpt_btn].onmouseout=action_onmouseout;
 btn1[cpt_btn].onclick=action_onclick;
 menu.appendChild(btn1[cpt_btn]);
 cpt_btn++;
} while (cpt_btn<btn.length);

Cordialement,
el_linwin

Ebnou_Ljabal · Answer

Merci Beaucoup el_linwin,
Votre code fonctionne bien dans FireFox.
Sauf que dans IE donne le message 'target' a la valeur Null ou n'est pas un objet.

el_linwin · Answer

Bonsoir Ebnou_Ljabal,

En effet, le code que je propose n'est compatible qu'avec Netscape/Mozilla/Opera...
Voici la version 100% compatible (du moins, je l'espère):

function action_onmouseover(e) 
{ var cnt=0; 
  if (!e) var e=window.event;
  // Avec l'objet évènement récupéré dans 'e', on recherche le bouton concerné
  if (e.target) code=e.target; else if (e.srcElement) code=e.srcElement;
  while (code.target!=btn1[cnt]) cnt++; 
  // 'cnt' contient le numéro du bouton, on peut y aller 
  btn1[cnt].src=btn[cnt].src_over; 
} 


function action_onmouseout(e) 
{ var cnt=0; 
  if (!e) var e=window.event;
  // Avec l'objet évènement récupéré dans 'e', on recherche le bouton concerné 
  if (e.target) code=e.target; else if (e.srcElement) code=e.srcElement;
  while (code.target!=btn1[cnt]) cnt++; 
  // 'cnt' contient le numéro du bouton, on peut y aller 
  btn1[cnt].src=btn[cnt].src_out; 
} 


function action_onclick(e) 
{ var cnt=0; 
  if (!e) var e=window.event;
  // Avec l'objet évènement récupéré dans 'e', on recherche le bouton concerné 
  if (e.target) code=e.target; else if (e.srcElement) code=e.srcElement;
  while (code.target!=btn1[cnt]) cnt++;
  // 'cnt' contient le numéro du bouton, on peut y aller 
  document.location=(btn[cnt].cible);
} 

var cpt_btn=0; 
do{ 
 btn1[cpt_btn]=document.createElement("img"); 
 btn1[cpt_btn].src=btn[cpt_btn].src_out; 
 btn1[cpt_btn].className=btn[cpt_btn].class_name; 
 btn1[cpt_btn].alt=btn[cpt_btn].alt; 
 btn1[cpt_btn].onmouseover=action_onmouseover; 
 if (btn1[cpt_btn].captureEvents) btn1[cpt_btn].captureEvents(Event.MouseOver);
 btn1[cpt_btn].onmouseout=action_onmouseout; 
 if (btn1[cpt_btn].captureEvents) btn1[cpt_btn].captureEvents(Event.MouseOut);
 btn1[cpt_btn].onclick=action_onclick; 
 if (btn1[cpt_btn].captureEvents) btn1[cpt_btn].captureEvents(Event.Click);
 menu.appendChild(btn1[cpt_btn]); 
 cpt_btn++; 
} while (cpt_btn<btn.length);

Cordialement,
el_linwin

Ebnou_Ljabal · Answer

Bonsoir el_linwin,
ça marche !!
Merci infiniment. Que de temps gagné.
Heureusement que vous êtes là

Btn1[.]a la valeur Null ou n'est pas un objet

9 réponses

Discussions similaires

Newsletters