My JavaScript code returns null for getElementById

Question

For your information, this is not a duplicate - my question was not solved by similar questions .

I am trying to log this element:

<p id="one">Test</p>

to the console with JavaScript:

var one = document.getElementById("one");
console.log(one);

However, this returns null for the console.log(one); line, and I can't figure out the reason. Where is the null value coming from, and how do I make it reference the <p id="one">Test</p> element?

EDIT: Full HTML code:

<!doctype html>

<html lang="en">

    <head>

        <meta charset="utf-8">

        <title>A tester</title>

        <script src="index.js"></script>

    </head>

    <body>

        <p id="one">One</p>

    </body>

</html>

Haven't I done that already? That's all my code, and it shows what I have and what the problem is. — Jack Bashford, Sep 14 '18 at 09:34
Did you run you script before or after the HTML element is actually loaded? — Ricky Mo, Sep 14 '18 at 09:35
When you say that it is not a duplicate, please explain why it is not and show which solution you already tried — Weedoze, Sep 14 '18 at 09:37
@Arvind what do you mean different frames? I don't really understand that concept — Jack Bashford, Sep 14 '18 at 09:48

score 4 · Accepted Answer · answered Sep 14 '18 at 09:36

4

Probably you are accessing the element before the DOM is ready, Try with DOMContentLoaded:

document.addEventListener("DOMContentLoaded", function(event) {
  var one = document.getElementById("one");
  console.log(one);
})

<p id="one">Test</p>

answered Sep 14 '18 at 09:36

Mamun

66,969
9
47
59

Perfect! This fixed my problem, thanks so much! Will accept your answer when timeout expires – Jack Bashford Sep 14 '18 at 09:44
@JBDouble05, you are most welcome. Glad that it worked for you :) – Mamun Sep 14 '18 at 09:45

score 2 · Answer 2 · answered Sep 14 '18 at 09:35

2

It is working fine :)

var one = document.getElementById("one");
console.log(one);

<p id="one">Test</p>

answered Sep 14 '18 at 09:35

score 2 · Answer 3 · answered Sep 14 '18 at 09:41

It works fine.

<html lang="en">

    <head>

        <meta charset="utf-8">

        <title>A tester</title>

        <script src="index.js"></script>
        <script>
            function getOne()
            {
                var one = document.getElementById("one");
                console.log(one);
            }
        </script>
    </head>

    <body onload="getOne()">

        <p id="one">One</p>

    </body>

</html>

My JavaScript code returns null for getElementById

3 Answers3