onClick ne fonctionne pas correctement sur la balise p

Question

Je souhaite lier un événement click à tous les <p> mais cela ne semble pas fonctionner correctement. Lorsque j'exécute le script, je reçois instantanément trois alertes. Je veux seulement les obtenir en cliquant sur l'un des trois <p>' s.

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

Editer: C'est ce à quoi ça ressemble. Le code 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

Answer 1

Merci pour toutes les réponses. Très appréciée!
J'ai réécrit mon propre script et je l'ai résolu comme ceci: Comment cela ressemble-t-il?

(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]); 
      } 
     } 
    } 
})(); 

Answer 2

Essayez de remplacer

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

avec

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

Vous voyez, quand vous attribuez à la onClick d'un objet, vous copiez le résultat de l'expression de ce . Qu'est-ce que votre supposé copier est une fonction à appeler lorsque le p est cliqué.

Au lieu de cela, vous êtes en cours d'exécution la commande myFunction(pTags[i]), qui exécute les alert() s, et prend le résultat de la fonction. Maintenant, puisque la fonction ne renvoie rien, la valeur de l'expression myFunction(pTags[i]) est indéfinie.

Et vous prenez cette valeur, et l'affecter à onClick. Donc, en gros ce que vous avez fait est:

Pour chaque paragraphe "spécial":

1. Execute alert
2. Assigner undefined à onClick de paragraphe.

Answer 3

maFonction aurait besoin de retourner une fonction pour votre code pour

Ci-dessous quelqu'un mentionne une option qui tente de créer une fonction en ligne, mais parce que la liaison fermeture se produit avec des variables, et non des valeurs, cela ne fonctionnera pas (Le i dans le code sera modifié après l'avoir inclus dans la fonction).

Il existe deux manières évidentes de créer la fonction et de la faire fonctionner. L'un est de créer une fonction par gestionnaire ... L'autre utilise this pour obtenir 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 pour mettre en œuvre par le navigateur.

Answer 4

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

Answer 5

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

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

Vous pouvez modifier votre code de cette façon:

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

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