Getting document is not defined , from document.getElementById

Question

I am learning JavaScript and I am using Atom (Text Editor). On my HTML file I got only this:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
</head>
<body>
    <h1>Hello Plunker!</h1>
    <button id="displayTodosButton">Display Todos</button>
    <button>Toggle Todos</button>
</body>
</html>

On my javascript file, I am simply trying to access the "Display todos" button using this:

var displayTodosButton = document.getElementById('displayTodosButton')

I was watching a video, and the instructor is using plnkr.co, and he accesses the button just fine, yet on Atom I get the "ReferenceError: document is not defined"

How can I fix this?

The script is in the head, the element is in the body, so the script probably runs before the element is available, but that would just give you `null`, not the error you're describing. — adeneo, Dec 19 '16 at 14:59
*"yet on Atom I get"* Do you mean that your editor is highlighting a line in the code and warning you that `document` is undefined? Not that the *browser* is doing that? — T.J. Crowder, Dec 19 '16 at 15:01
If it's just in the editor, as in it doesn't understand that `document` doesn't need to be defined elsewhere in the scripts, it doesn't matter? — adeneo, Dec 19 '16 at 15:03
try running your code, check the console and see if it says the same or if it actually works — Kevin Kloet, Dec 19 '16 at 15:03

T.J. Crowder · Answer 1 · 2016-12-19T15:11:21.343

yet on Atom I get

If you really mean that Atom, your text editor, is highlighting it and showing you a warning that document is undefined, it's just that Atom doesn't realize you're running that code in a browser context where document will be defined.

It probably has a setting where you can tell it that you'll be running the code in a browser, so it can assume the default set of globals (window, document, etc.).

If the code in script.js is just what you've shown, although the error Atom is showing you won't be a problem (because in the browser, document will not be undefined), you'll get null back from getElementById because your code runs before the element exists. Again, this is assuming that code is on its own, not (say) inside a DOMContentLoaded handler or similar.

Unless you have a good reason to do it (and there aren't many), putting script elements in the head is an anti-pattern. Put them in body, right at the end, just prior to the closing </body> tag. That way, any elements defined above them will have been created by the browser before your code runs.

score 2 · Answer 2 · edited May 23 '17 at 12:00

You have hit some menu option or key combination which is trying to execute the JS file using Node.js.

Your code, however, is designed to run, embedded in a web page, using the APIs supplied by web browsers.

Web browsers, under those circumstances, will provide a document object. Node.js will not.

You need to open the HTML document in a web browser. The open in browser extension might be useful.

You can see any error reports using the Developer Tools that every major browser supplies.

(NB: The first error you will then encounter is explained by this question and answer).

score 2 · Answer 3 · answered Dec 19 '16 at 15:13

2

It looks like you are trying to run the JS code with the "script" package in atom (which is in a NodeJS context). What you actually want to do, is to run it in your web browser. So just open index.html in your favorite browser and see the magic :)

answered Dec 19 '16 at 15:13

Cohars

3,822
1
29
50

Getting document is not defined , from document.getElementById

3 Answers3

Linked

Related