web-dev-qa-db-fra.com

Javascript: Uncaught TypeError: impossible d'appeler la méthode 'addEventListener' de null

J'essaie de faire quelque chose d'assez simple, mais comme je ne suis probablement pas assez bon pour chercher de la documentation, je ne peux pas le faire fonctionner.

J'ai un JS en ligne fonctionnel qui ressemble à ceci:

<A title="Wolfram IP Calc" href="javascript:txt=Prompt('Enter%20IP%20address,%20e.g.%2010.20.30.40/29','1.2.3.4/5');%20if(txt)%20window.open('http://www.wolframalpha.com/input/?i='+txt);void(O);">Compute!</A>

Pour diverses raisons, j'essaie de séparer le JS, et c'est là que j'ai eu un problème.

J'ai créé la page de test suivante qui me donne l'erreur Uncaught TypeError: Cannot call method 'addEventListener' of null:

<HTML> <HEAD profile="http://www.w3.org/2005/10/profile"> <script type="text/javascript">
var compute = document.getElementById('compute');
compute.addEventListener('click', computeThatThing, false);

function computeThatThing() {
    txt=Prompt('Enter%20IP%20address,%20e.g.%2010.20.30.40/29','1.2.3.4/5');
    if(txt) {
        window.open('http://www.wolframalpha.com/input/?i='+txt);
    }
}
</script></HEAD>
<BODY>
<A title="Wolfram IP Calc" id="compute" href="javascript:void(O);">Test</A>
</BODY>
</HTML>

La seule chose que j'ai pu constater qui pointe vers un problème comme celui-là est que addEventListener ne peut pas fonctionner avec <A> mais devrait gérer <IMG> (ce qui me convient le mieux, car je vais le verser sur certaines images). essayé d'ajouter ce qui suit en vain:

<img id="compute" src="http://products.wolframalpha.com/images/products/products-wa.png" />

Merci d'avance de signaler ce que je fais mal. C’est probablement une évidence, mais j’ai une expérience quasi nulle avec JS et j’en suis allé surtout à la culture du fret quand j’en avais eu besoin jusqu’à présent.

javascriptaddeventlistener
24
Jan

Votre code est dans le <head> => avant que les éléments ne soient rendus, donc document.getElementById('compute'); renvoie null, comme promis par le MDN ...

element = document.getElementById (id);
element est une référence à un objet Element, ou null si un élément avec l'ID spécifié ne se trouve pas dans le document.

MDN

Solutions:

  1. Placez les scripts au bas de la page.
  2. Appelez le code d'attachement dans l'événement de chargement.
  3. Utilisez la bibliothèque jQuery et son événement prêt pour le DOM.

Qu'est-ce que l'événement jQuery ready et pourquoi est-il nécessaire?
(pourquoi pas seulement l'événement de chargement de JavaScript):

Bien que JavaScript fournisse l'événement de chargement pour l'exécution du code lorsqu'une page est rendue, cet événement n'est pas déclenché tant que tous les éléments tels que les images n'ont pas été complètement reçus. Dans la plupart des cas, le script peut être exécuté dès que la hiérarchie DOM est entièrement construite. Il est garanti que le gestionnaire passé à .ready () sera exécuté une fois que le DOM est prêt. C'est donc généralement le meilleur endroit pour attacher tous les autres gestionnaires d'événements ...
...

readydocs

54
gdoron

Déplacer la balise de script à la fin de BODY au lieu de HEAD car, dans le code actuel, lorsque le script est calculé, l'élément html n'existe pas dans le document.

Depuis que vous ne voulez pas vous jquery. Utilisez window.onload ou document.onload pour exécuter la totalité du code que vous avez dans la balise de script en cours . window.onload vs document.onload

0
Shubham Gupta