11548 sujets

JavaScript, DOM et API Web HTML5

Bonjours,

je suis débutant en javascript, et mon but ici et d'implementer tout mon javascript dans mon code xhtml en dynamique depuis mon module js

et je me prend la tête pour faire un truc tout con :
rajouter des evenement 'onclick' sur des liens ayant comme nom de classe 'aEvent'. le but du jeu est d'appeler une fonction (montre(id)) qui prend comme parametre le parametre id de la requete php incluse dans href du liens

pour etre plus clair, voici un des liens :
<a class='aEvent' href="meteo.php?falaise=5">bla bla</a>


je veux donc rajouter le code "montre('5');return false;" dans l'evenement onclick

et le code :

//test des methodes
    if (!document.getElementsByTagName) {return;}

    //recuperation element
    var oA  = document.getElementsByTagName("a");

    //si pas de lien <a>
    if (!oA ) {return;}

    //nombre le liens trouvés
    var i = oA.length - 1;
    for(i; i >= 0; i--)
    {
        // si le lien est de class 'aEvent'
        if (oA[ i ].className == "aEvent")
        {            
            //recup numero slide meteo
            var sNum= oA[ i ].href;
            sNum = sNum.substring(sNum.indexOf("=",0)+1,sNum.length + 1);
            
            oA[ i ].onclick = function()
            {
                  montremeteo( sNum);
                  return false;
            }
              
        }
    }


lorsque je suis pas à pas ma fonction sous firebug, tout se passe bien comme je le souhaite (sNum passe par toutes les valeur definies dans les lien aEvent du XHTML).

seulement à la fin, tous mes liens appelent montremeteo('1') ou 1 est la dernière valeur prise par sNum

en esperant avoir clairement exposer mon probleme
et merci d'avance des reponses

fabien

PS : le code ci dessus a été simplifié
le site est la pour les curieux. le but est de masque/afficher le bon slide meteo en passant sur les liens
Modifié par le fab (16 Mar 2007 - 10:27)
Bonjour et bienvenue sur Alsacréations. Smiley smile

C'est un problème classique de "closure" : ta fonction anonyme garde une référence vers la variable locale sNum, dont la valeur change.

Il faut adopter une solution de ce style :
    function creerClickFn(sNum) {
        return function() {
             montremeteo(sNum);
             return false;
        };
    }

    //test des methodes
    if (!document.getElementsByTagName) {return;}

    //recuperation element
    var oA  = document.getElementsByTagName("a");

    //si pas de lien <a>
    if (!oA ) {return;}

    //nombre le liens trouvés
    var i = oA.length - 1;
    for(i; i >= 0; i--)
    {
        // si le lien est de class 'aEvent'
        if (oA[ i ].className == "aEvent")
        {            
            //recup numero slide meteo
            var sNum= oA[ i ].href;
            sNum = sNum.substring(sNum.indexOf("=",0)+1,sNum.length + 1);
            
            oA[ i ].onclick = creerClickFn(sNum);
        }
    }
merci bien

j'avais trouvé une autre solution hier soir, peut etre un peu moins propre mais qui marche bien :
...
            oA[ i ].onclick = function()

            {

                  montremeteo( (this.href).substring((this.href).indexOf("=",0)+1,(this.href).length + 1));

                  return false;

            }
...


en tout cas le retiens la tienne, qui permet de passer des vraie variables locales, non contenue dans l'objet

j'aurai appris un truc aujourd'hui : les closures

fabien
Modifié par le fab (16 Mar 2007 - 10:33)