Imansible ottenere la proprietà ‘addEventListener’

Ho lavorato su un piccolo aspetto della mia applicazione oggi e volevo ottenere una barra scorrevole sulla mia applicazione. Stamattina ho fatto una domanda dove c’erano delle buone risposte. Recentemente ho voluto provare a rispondere a ciò che ho dato usando Script , CSS e HTML .

Sto ottenendo il problema di far funzionare lo script in quanto continua a generare un errore che dice:

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

Questo è lo script :

  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'));  

Ecco l’ HTML :

 

Da quello che riesco a capire non è in grado di trovare l’ID?

Il problema è che stai eseguendo lo script PRIMA che gli elementi nella pagina siano stati creati. Questo è il motivo per cui getElementById restituisce null .

Ci sono diversi modi per aggirare questo …

  • (come commentato da Kendall) puoi spostare lo script alla fine di
  • Puoi inserire il tuo codice in una funzione e chiamare quella funzione da
  • Se puoi usare jQuery, puoi avvolgere il codice in $(function() { ... });