How to Fix &quot;ReferenceError: document is not defined&quot; in JavaScript? - Coding

The “ReferenceError: document is not defined” error in JavaScript is a common issue that occurs when trying to access the document object outside the browser environment such as in Node.js. This error can also occur if the script is executed before the HTML document is fully loaded. In this article, we’ll explore the causes of this error and provide solutions to fix it.

Problem Statement

The document object is part of the Web API and is available only within the browser’s context. When running JavaScript in environments like Node.js the document object is not available leading to the “ReferenceError”. Additionally, trying to access the document object before the page is fully loaded in the browser can also cause this error.

Consider the following JavaScript code:

console.log(document.getElementById("myElement"));

If this code is run in the Node.js environment it will throw the error:

ReferenceError: document is not defined” in JavaScript

Methods to Solve the Error

To solve this issue we need to ensure that the document object is accessed in the appropriate environment (browser) and at the correct time
(after the DOM is fully loaded).

1. Checking Environment

Ensure that your code is running in a browser environment if it relies on the document object. If we need to run the code in Node.js we should use libraries like jsdom to the simulate a browser environment.

2. Using window.onload

Ensure the script runs only after the entire page is loaded:

window.onload = function() {
    console.log(document.getElementById("myElement"));
};

3. Using DOMContentLoaded Event

Ensure the script runs after the DOM is fully loaded but before the other resources like images and stylesheets:

document.addEventListener("DOMContentLoaded", function() {
    console.log(document.getElementById("myElement"));
});

4. Placing Scripts at the End of the Body

The Place your script tags at the end of the body section so that they run after the HTML has been parsed:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document Error Example</title>
</head>
<body>
    <div id="myElement">Hello World</div>
    <script>
        console.log(document.getElementById("myElement"));
    </script>
</body>
</html>

Example: Implementation to fix the above error by using window.upload to show.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Document Error Example</title>
</head>
<body>
    <div id="myElement">Hello World</div>
    <script>
        window.onload = function() {
            console.log(document.getElementById("myElement"));
        };
    </script>
</body>
</html>

Output

<div id="myElement">Hello World</div>

Example: Implementation to fix the above error by using Using DOMContentLoaded Event to show.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document Error Example</title>
</head>
<body>
    <div id="myElement">Hello World</div>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            console.log(document.getElementById("myElement"));
        });
    </script>
</body>
</html>

Output

<div id="myElement">Hello World</div>

Reffered: https://www.geeksforgeeks.org

JavaScript

Related
JavaScript SyntaxError – Unexpected reserved word
JavaScript SyntaxError – Invalid left-hand side in postfix operation
Difference Between for...in and Object.keys() in JavaScript
Difference Between new Date() and Date.now() in JavaScript
How to Fix npm ERR! code EINTEGRITY?

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	17