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.
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.
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:
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:
Se necessitar de algo que faça o mesmo efeito do DOMContentLoaded
para navegadores antigos você pode experimentar este exemplo: