Cannot read Property 'addeventlistener' of null

Question

I’m trying to use in my project the scrollleft with the button, it works normal on jsfiddle

But when I put in my project it returns me this error:

Uncaught Typeerror: Cannot read Property 'addeventlistener' of null.

Answer 1

Probably in the script on your machine you didn’t use window.onload or DOMContentLoaded, jsfiddle works because the script runs after the DOM loads, see how it is in your jsfiddle:

So to adjust can do something like:

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

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

Another way with onload would be:

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

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

The addEventListener can makes it a little easier to use multiple functions with the same type of event

Or with something faster:

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

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

The difference of onload and DOMContentLoaded you can see here:

• What is the difference between $(Document). ready() and window.onload?

Alternative to older browsers

If you need something that will do the same DOMContentLoaded for old browsers you can try this example:

• Is there any equivalent of "$(Document). ready()" with pure Javascript?