JavaScript does not need an introduction as programmers are already aware of its importance. For creating interactive elements for web pages and applications, it is used extensively. Working with JavaScript is fun if you know how to use functions, classes, and features. Programmers and developers enjoy creating projects. Programming is a bit tough for beginners who are just started learning. Whether you are a programmer or a beginner, everyone faces error warnings. Beginners get to see more warnings. Today, we are going to discuss the error you may encounter “ReferenceError Document Not Defined in JavaScript”.
Errors seem tough, but the determination to solve those is what makes you crack the right code. We are here to provide you with a helping hand to drag you out of the error warning. Go ahead with the article to get through the code. First, let’s figure out how the error shows up
How the error warning pops up
When trying to reference an object of the document, you get the following error message
ReferenceError: document is not definedThe common reasons to land up in the error are:
On node
It is the most prominent yet common cause of the error. The main issue is that you try your best to have access to the document object on the server, while the server can’t seem to have access to the document object as it does not have access. On the contrary, it is on the browser, so your server doesn’t have any access.
In short, you are not permitted to reference the document object as the node is a server-side runtime.
On browser
If you try to access the document object too early, you get an error warning. The suggested option is to shift the code to the page’s bottom to ensure the document is prepared to reference your code by that time. Look at the code you need to move to the bottom
<html>
<head>
<title>HTML page</title>
</head>
<body>
<!-- HTML here -->
<!-- your script here -->
<script type="module" src="index.js"></script>
</body>
</html>In order to check the existence of an object, use the below code
if (typeof document !== "undefined") {
// document exists
} else {
// document does not exist
}After confirming the availability of the object, reference the object with no error
if (typeof document !== "undefined") {
document.getElementById("my-element");
}How To Solve the Error “ReferenceError Document Not Defined in JavaScript”
To resolve the error, you need to make sure you move your script at the end of your body tag or you can also utilize a global variable. Place this code in your index.html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<script src=”app.js”></script>
<title>ReferenceError: Document is not defined</title>
</head>
<body>
<h1>Body of the HTML Doc</h1>
<div id=”msg”>
<p>This is a message.</p>
</div>
</body>
</html>The next thing to do is to use the following code in the app.js
console.log("This is a ReferenceError: document is not defined");
var x = document.getElementById("msg");
console.log(x);Solution
Use the below code to fix the error
console.log("Fixing Document is not defined in NodeJS");
if (typeof window !== "undefined") {
console.log("In Browser");
var x = document.getElementById("msg");
console.log(x);
}
else {
console.log("In nodeJS");
}In the case you have an undefined window object, you may have run the JavaScript code in Node. If not, the solution can help as you must be in the browser.
Conclusion
And that’s how you can fix the error “ReferenceError Document Not Defined in JavaScript”. I really hope, you find it informative and useful!
I wish you all the best!