onClick ne fonctionne pas correctement sur la balise p

Je veux lier un événement click à chaque <p> mais il ne semble pas fonctionner correctement.

Quand je lance le script je obtenir instantanément des trois alertes. Je ne veux que vous obtenez lorsque vous cliquez sur l'un des trois <p>'s.

Quelqu'un peut me dire ce que je fais mal?

Edit: Sry c'est à quoi il ressemble.
Le HTML est juste comme il se doit: <p class="special">text text text</p> etc

(function () {
    var myFunction = function (theP) {
            alert(theP.id)          
        }


    window.onload = function () {           
        var pTags = document.getElementsByTagName('p'),
            pLength = pTags.length,
            i;

        for (i = 0; i < pLength; i += 1) {
            if(pTags[i].className == 'special'){

                pTags[i].onClick = myFunction(pTags[i]);

            }
        };
    }
})();

Ps. Je ne peux pas utiliser jQuery atm

  • Peut-on voir un extrait de ton code html? Vous n'avez pas imbriquées les balises p et toi?
  • Une fois que vous résoudre la question de la fonction mentionnée par scraimer, ce code ne pas fonctionner dans tous les navigateurs. Envisager la liaison avec l'approche présentée dans le quirksmode.org/js/eventSimple.html.
  • Alan, j'ai édité mon post voir ^
InformationsquelleAutor patad | 2009-11-24
  1. 7

    Essayez de remplacer

    pTags[i].onClick = myFunction(pTags[i]);

    avec

    pTags[i].onClick = function() { myFunction(pTags[i]); }

    Voyez-vous, lorsque vous affectez à l' onClick d'un objet, vous de copier le résultat de l'expression à elle. Ce que votre supposé copie est une fonction à appeler lorsque l' p est cliqué.

    Au lieu de cela, vous êtes de course la commande myFunction(pTags[i]), qui exécute les alert()s, et prend le résultat de la fonction. Maintenant, étant donné que la fonction ne retourne rien, la valeur de l'expression myFunction(pTags[i]) est pas défini.

    Et vous prenez la valeur, et de l'attribuer à onClick. Donc, fondamentalement, ce que vous avez fait est:

    Pour chaque "spécial" paragraphe:

    1. Exécuter alert
    2. Attribuer undefined au paragraphe onClick.
    • Exactement. Ce que vous avez fait est attribué à l'événement click d'un appel à une fonction (c'est à dire l'appel de la fonction, et d'affecter le résultat de l'événement). Ce que vous voulez est d'attribuer des cas à une fonction.
    • Ce code ne fonctionnera jamais car il essaie de faire une fermeture à partir d'une valeur...
    InformationsquelleAutor Shalom Craimer
  2. 4

    .onclick est sensible à la casse, n'est-ce pas?

    • btw, juste testé, onClick ne fonctionne pas sur Chrome Dernière,Opera 10, Firefox3.7 et IE8. seulement onclick œuvres
    • toutes les personnes à l'aide de onClick à titre d'exemples, donc je suis assez choquée que je n'ai gros malentendu dans ma vie ou pas, heureusement Ses pas. 😛
    InformationsquelleAutor YOU
  3. 4

    myFunction aurait besoin de retour d'une fonction pour votre code fonctionne

    En dessous de quelqu'un mentionne une option qui essaie de créer une fonction inline, mais en raison de la fermeture de la liaison qui se passe avec des variables, et non des valeurs, cela ne fonctionnera pas (Le i dans le code sera modifié après, y compris dans la fonction).

    Il y a deux façons évidentes de la création de la fonction et de le faire travailler. L'une consiste à créer une indemnité de fonction de gestionnaire... L'autre est à l'aide de this pour récupérer l'élément.

    (function () {
    var myFunction = function (theP) {
            return function() {
                alert(theP.id);
            }                 
        }


    window.onload = function () {                       
        var pTags = document.getElementsByTagName('p'),
                pLength = pTags.length,
                i;

        for (i = 0; i < pLength; i += 1) {
                if(pTags[i].className == 'special'){

                        pTags[i].onClick = myFunction(pTags[i]);

                }
        };
    }
})();

    Et avec this

    (function () {
    var myFunction = function () {
                alert(this.id)                  
        }


    window.onload = function () {                       
        var pTags = document.getElementsByTagName('p'),
                pLength = pTags.length,
                i;

        for (i = 0; i < pLength; i += 1) {
                if(pTags[i].className == 'special'){

                        pTags[i].onClick = myFunction;

                }
        };
    }
})();

    Le second format est le format préféré, car il utilise beaucoup moins de mémoire à mettre en œuvre par le navigateur.

    • merci pour cette! j'ai changé mon code car j'ai tapé dans la mauvaise chose. myFunction est déclaré comme " var mafonction = function(theP) {..}'
    InformationsquelleAutor Douglas Mayle
  4. 1

    Vous appelez votre fonction. Lorsque vous utilisez les parenthèses vous appelez votre fonction.

    onclick nécessite une fonction de référence:

    Vous pourriez modifier votre code de cette façon:

    myFunction(theP){
 return function(){alert(theP.id)};
}

    Cela permettrait de s'assurer que votre appel renvoie une référence à une fonction au lieu d'une valeur.

    InformationsquelleAutor Tim
  5. 1

    Merci pour toutes les réponses. Beaucoup apprécié!

    J'ai réécrit mon propre script et résolu comme ceci:
    Comment regarder?

    (function () {
    var myFunction1 = function (theP) {
            theP.onclick = myFunction2;
        },

        myFunction2 = function(){
            alert('hello world')
        }


    window.onload = function () {           
        var pTags = document.getElementsByTagName('p'),
            pLength = pTags.length,
            i;

        for (i = 0; i < pLength; i += 1) {
            if(pTags[i].className == 'special'){
                myFunction1(pTags[i]);
            }
        }
    }
})();
    InformationsquelleAutor patad