Impossible d'obtenir la propriété 'addEventListener'

J'ai travaillé sur un petit aspect de ma demande aujourd'hui et je voulais obtenir une barre coulissante sur ma demande. J'ai posé une question ce matin où il y avait de bonnes réponses. J'ai récemment voulu essayer de répondre que je l'ai fait en utilisant Script , CSS et HTML .

Je suis en train de faire problème pour que le script fonctionne car il continue d'avoir une erreur en disant:

0x800a138f - JavaScript runtime error: Unable to get property 'addEventListener' of undefined or null reference 

C'est le script :

 <script type="text/javascript"> var desktops = document.querySelectorAll('.desktop'); function hide(element) { element.style.setProperty('left', '-100%', element.style.getPropertyPriority('left')); } function hideAll() { for (var i = 0; i < desktops.length; i++) { hide(desktops[i]); } } function show(element) { element.style.setProperty('left', '0', element.style.getPropertyPriority('left')); } document.getElementById('link-one').addEventListener('click', function () { hideAll(); show(document.getElementById('one')); }, false); show(document.getElementById('one')); </script> 

Voici le HTML :

 <ul> <li id="link-one"> <div>1</div> <div>One</div> </li> </ul> <div id="one" class="desktop"> <h1>Sidebar Example</h1> <p>This is 1</p> <p>Something here.</p> </div> 

D'après ce que je peux comprendre, il ne peut pas trouver l'ID?

Le problème est que vous exécutez le script AVANT que les éléments de la page ont été créés. C'est pourquoi le getElementById renvoie null .

Il existe plusieurs façons de contourner cela …

  • (Tel que commenté par Kendall), vous pouvez déplacer le script jusqu'à la fin de <body>
  • Vous pouvez mettre votre code dans une fonction et appeler cette fonction à partir de <body onload="newFunction();">
  • Si vous pouvez utiliser jQuery, vous pouvez envelopper le code en $(function() { ... });