4

Estou tentando utilizar no meu projeto o scrollleft com o botão, ele funciona normal no jsfiddle

Porém quando coloco no meu projeto ele me retorna este erro:

Uncaught TypeError: Cannot read property 'addEventListener' of null.

1
  • 1
    Facil, so chamar o seu arquivo "js" no fim da pagina html </body> <script src="SEUARQUIVO.js"></script> </HTML> Commented 25/03/2019 às 17:00

1 Resposta 1

9

Provavelmente no script na sua máquina você não usou window.onload ou DOMContentLoaded, no jsfiddle funciona porque o script é executado depois do DOM carregar, veja como esta no seu jsfiddle:

configuração do jsfiddle

Então para ajustar pode fazer algo como:

window.onload = function () {
    var mover = document.getElementById("mover");
    var painel = document.getElementById("painel");

    mover.addEventListener("click", function (event) {
      painel.scrollLeft += 100;
    });
};

Outra maneira com onload seria:

window.addEventListener("load", function () {
    var mover = document.getElementById("mover");
    var painel = document.getElementById("painel");

    mover.addEventListener("click", function (event) {
      painel.scrollLeft += 100;
    });
});

O addEventListener pode torna um pouco mais fácil o uso de múltiplas funções com um mesmo tipo de evento

Ou com algo mais rápido:

document.addEventListener("DOMContentLoaded", function () {
    var mover = document.getElementById("mover");
    var painel = document.getElementById("painel");

    mover.addEventListener("click", function (event) {
      painel.scrollLeft += 100;
    });
});

A diferença de onload e DOMContentLoaded você pode ver aqui:

Alternativa para navegadores antigos

Se necessitar de algo que faça o mesmo efeito do DOMContentLoaded para navegadores antigos você pode experimentar este exemplo:

4
  • 1
    Obrigado.. Funcionou PERFEITAMENTE, ERA ISSO QUE EU QUERIA. Obrigado.
    – Mariana
    Commented 26/05/2017 às 15:51
  • Guilherme, como posso reproduzir essa primeira imagem que postou nessa resposta ? Ultlizei a solução "window.onload" em meu código e funcionou perfeitamente. Isso significa que todo meu js deverá estar dentro do onload ? Isso acontece porque o js está sendo carregado antes da pagina ? Commented 21/06/2020 às 22:40
  • 1
    @RailanePassos deverá estar dentro do onload se precisar manipular o DOM/HTML, mas não precisa ser o onload, como eu expliquei na resposta, o DOMContentLoaded será mais rapido pq só vai esperar a página carregar e não vai esperar imagens e videos e outras coisas, então você já vai poder pegar os elementos HTML
    – Syzoth
    Commented 21/06/2020 às 23:08
  • Obrigada Guilherme ! Commented 22/06/2020 às 19:30

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .