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

Résolu
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.
Configuration: Windows XP
Firefox 3.0.1

9 réponses

  1. 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
    2
    1. 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
      1
      1. 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
        1
        1. Bonsoir,

          Votre aide m'a était très utile.
          Avec quelques petites modifications mon menu fonctionne très bien dans IE et gecko.

          Je tiens à vous remercier infiniment.
          Ebnou_Ljabal (Le montagnard)
          0
      2. 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
        0
        1. 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.
          0
          1. 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.
            0
            1. J'ai bien compris.
              Maintenant, comment dois-je faire pour que ça fonctionne??
              0
              1. 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.
                0
                1. Bonsoir el_linwin,
                  ça marche !!
                  Merci infiniment. Que de temps gagné.
                  Heureusement que vous êtes là
                  0