Getting null for no absolutely no reason in JS?

Question

Basically title. Here is the code:

const car = document.getElementById("car");
console.log(car.offsetLeft);

* {
    margin: 0;
    padding: 0;
}

body {
    height: 100vh;
    width: 100vw;
    display: flex;
}

#game {
    width: 98%;
    height: 150px;
    right: -1%;
    border: 1px solid black;
    top: 45%;
    position: relative;
    overflow: hidden;
}

#floor {
    background-color: brown;
    position: absolute;
    width: 100%;
    height: 10px;
    bottom: 0px;
}

#npc1 {
    background-color: red;
    width: 100px;
    height: 30px;
    position: absolute;
    bottom: 10px;
    left: 500px;
    animation: npc1Drive 10s linear;
}

#npc2 {
    background-color: red;
    width: 100px;
    height: 30px;
    position: absolute;
    bottom: 10px;
    left: 0px;
    animation: npc2Drive 10s linear;
}

#car {
    background-color: blue;
    width: 100px;
    height: 30px;
    position: absolute;
    bottom: 10px;
    left: 250px;
}

#possible {
    background-color: green;
    width: 200px;
    height: 30px;
    position: absolute;
    bottom: 10px;
    left: 200px;
    animation: possible 10s linear;
}

#seen {
    background-color: yellow;
    width: 150px;
    height: 30px;
    position: absolute;
    bottom: 10px;
    left: 225px;
    animation: seen 10s linear;
}

@keyframes npc1Drive {
    0% {
        left: 500px;
    }
    100% {
        left: 2480px;
    }
}

@keyframes npc2Drive {
    0% {
        left: 0px;
    }
    100% {
        left: 1980px;
    }
}

@keyframes seen {
    0% {
        left: 225px;
    }
    100% {
        left: 2205px;
    }
}

@keyframes possible {
    0% {
        left: 200px;
    }
    100% {
        left: 2180px;
    }
}

<!DOCTYPE html>
<html>
    <head>
        <title>
            MIH
        </title>
        <link rel = "stylesheet" href = "carCSS.css">
    </head>
    <body>
        <script src = "carJS.js"></script>
        <div id = "game">
            <div id = "npc1"></div>
            <div id = "possible"></div>
            <div id = "seen"></div>
            <div id = "car"></div>
            <div id = "npc2"></div>
            <div id = "floor"></div>
        </div>
    </body>
</html>

As you can see, in the snippet I get what you would expect (as seen in the CSS) - 250. That's what I also got in every online code runner. However, Visual Studio Code wants to be a special child - this it what it gives me in the console:

I'm honestly stumped. Why would it do such thing, when it clearly works everywhere else? I didn't change anything, it's a copy-paste of what I have in VS code. I would love if some of you will clear it up for me, thanks in advance!

So you are previewing in Chrome and have it hooked up to VS Code to act as the debugger? What does the Chrome debugger at that time say? — Abion47, Oct 16 '20 at 19:37
lol I figured it out, I loaded the script before the HTML itself (check the HTML part of the snippet), I'm just dumb. Thanks for trying to help! — pierreh, Oct 16 '20 at 19:39
Everybody is saying to put the script tag at the end, which definitely works, but in modern browsers you can also use the `defer` attribute on the script tag: ` — Stephen P, Oct 16 '20 at 19:50
Also, see the "Antiquated recommendation" part of [an answer](https://stackoverflow.com/a/24070373/17300) to the question I linked as duplicate. There is a good reason to use `defer` instead of script-at-the-bottom — the browser can start downloading the script earlier, and defers the _execution_ of the script; when script is at the bottom of the body the browser can't even start downloading until it has reached and parsed the ` — Stephen P, Oct 16 '20 at 19:56

score 2 · Accepted Answer · answered Oct 16 '20 at 19:36

I think the error is because you are calling the function before the element is loaded on the DOM. It's a good practice to put all your script tags on the bottom of the body element.

Try to load the script after the DOM elements:

<!DOCTYPE html>
<html>
    <head>
        <title>
            MIH
        </title>
        <link rel = "stylesheet" href = "carCSS.css">
    </head>
    <body>
        <div id = "game">
            <div id = "npc1"></div>
            <div id = "possible"></div>
            <div id = "seen"></div>
            <div id = "car"></div>
            <div id = "npc2"></div>
            <div id = "floor"></div>
        </div>
        <script src = "carJS.js"></script>
    </body>
</html>

Oh. That makes sense. I'm stupid, it tries to get the offsetLeft of an element that doesn't even exist. I should honestly just quit coding.... Thanks tho!!!!!! lmao — pierreh, Oct 16 '20 at 19:38
As an aside, don't put the code in an interactive snippet window if it isn't executable code. The JS snippet engine doesn't know what to do if you just give it HTML like this and it just ends up throwing syntax errors. — Abion47, Oct 16 '20 at 19:40

score 1 · Answer 2 · answered Oct 16 '20 at 19:39

Adjust the cadence and move your script before the closing body tag.

const car = document.getElementById("car");
console.log(car.offsetLeft);

* {
    margin: 0;
    padding: 0;
}

body {
    height: 100vh;
    width: 100vw;
    display: flex;
}

#game {
    width: 98%;
    height: 150px;
    right: -1%;
    border: 1px solid black;
    top: 45%;
    position: relative;
    overflow: hidden;
}

#floor {
    background-color: brown;
    position: absolute;
    width: 100%;
    height: 10px;
    bottom: 0px;
}

#npc1 {
    background-color: red;
    width: 100px;
    height: 30px;
    position: absolute;
    bottom: 10px;
    left: 500px;
    animation: npc1Drive 10s linear;
}

#npc2 {
    background-color: red;
    width: 100px;
    height: 30px;
    position: absolute;
    bottom: 10px;
    left: 0px;
    animation: npc2Drive 10s linear;
}

#car {
    background-color: blue;
    width: 100px;
    height: 30px;
    position: absolute;
    bottom: 10px;
    left: 250px;
}

#possible {
    background-color: green;
    width: 200px;
    height: 30px;
    position: absolute;
    bottom: 10px;
    left: 200px;
    animation: possible 10s linear;
}

#seen {
    background-color: yellow;
    width: 150px;
    height: 30px;
    position: absolute;
    bottom: 10px;
    left: 225px;
    animation: seen 10s linear;
}

@keyframes npc1Drive {
    0% {
        left: 500px;
    }
    100% {
        left: 2480px;
    }
}

@keyframes npc2Drive {
    0% {
        left: 0px;
    }
    100% {
        left: 1980px;
    }
}

@keyframes seen {
    0% {
        left: 225px;
    }
    100% {
        left: 2205px;
    }
}

@keyframes possible {
    0% {
        left: 200px;
    }
    100% {
        left: 2180px;
    }
}

<!DOCTYPE html>
<html>
    <head>
        <title>
            MIH
        </title>
        <link rel = "stylesheet" href = "carCSS.css">
    </head>
    <body>
        <div id = "game">
            <div id = "npc1"></div>
            <div id = "possible"></div>
            <div id = "seen"></div>
            <div id = "car"></div>
            <div id = "npc2"></div>
            <div id = "floor"></div>
        </div>
        <script src = "carJS.js"></script>
    </body>
</html>

Martin · Answer 3 · 2020-10-16T19:46:16.947

I dont know if im corect but of what i understand the coputer dosent know what offsetLeft is.

btw u should put the script tag at the bottom of the body tag so everything loads before the script loads and it can cause some problems with pasts of the site not loading. atleast that is what ive heard

Edit: i edited the code a bit (i moved the script tag) and that fixed it

    <!DOCTYPE html>
<html>
    <head>
        <title>
            MIH
        </title>
        <link rel = "stylesheet" href = "carCSS.css">
    </head>
    <body>
        <div id = "game">
            <div id = "npc1"></div>
            <div id = "possible"></div>
            <div id = "seen"></div>
            <div id = "car"></div>
            <div id = "npc2"></div>
            <div id = "floor"></div>
        </div>
        <script src = "carJS.js"></script>
    </body>
</html>

Getting null for no absolutely no reason in JS?

3 Answers3