I get the a "ReferenceError: document is not defined" while trying to
var body = document.getElementsByTagName("body")[0];
I have seen this before in others code and didn't cause any trouble. Why is it now? The companied HTML page is just a div inside the body.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/quiz.css" />
<script type="text/javascript" src="js/quiz.js"></script>
</head>
<body>
<div id="divid">Next</div>
</body>
</html>
the code is the following:
(function(){
var body = document.getElementsByTagName("body")[0];
function Question(question, choices, correctAns) {
this.question = question;
this.choices = choices;
this.correctAns = correctAns;
}
Question.prototype.checkAns = function(givenAns){
if (this.correctAns === givenAns) {
console.log("OK");
}
};
function Quiz() {
this.questions = [];
}
Quiz.prototype.showAllQuestions = function(){
this.questions.forEach(function(questions){
console.log(questions.question);
});
};
Quiz.prototype.showQuiz = function(){
this.questions.forEach(function(questions){
for (var i=0; i < questions.choices.length; i+=1) {
body.innerHTML(
"<input type=\"radio\" name=\"sex\" value=\"male\">"
+ questions.choices[i] + "<br>");
}
});
};
var q1 = new Question("What is red?", ["Color","Animal","Building"],1);
var q2 = new Question("Most popular music?", ["Latin","Pop","Rock"],2);
var quiz = new Quiz();
quiz.questions.push(q1);
quiz.questions.push(q2);
quiz.showAllQuestions();
})();
Try the whole code in this link HERE
This question is related to
javascript
This happened with me because I was using Next JS
which has server side rendering. When you are using server side rendering there is no browser. Hence, there will not be any variable window
or document
. Hence this error shows up.
Work around :
If you are using Next JS you can use the dynamic rendering to prevent server side rendering for the component.
import dynamic from 'next/dynamic'
const DynamicComponentWithNoSSR = dynamic(() => import('../components/List'), {
ssr: false
})
export default () => <DynamicComponentWithNoSSR />
If you are using any other server side rendering library. Then add the code that you want to run at the client side in componentDidMount
. If you are using React Hooks then use useEffects
in the place of componentsDidMount
.
import React, {useState, useEffects} from 'react';
const DynamicComponentWithNoSSR = <>Some JSX</>
export default function App(){
[a,setA] = useState();
useEffect(() => {
setA(<DynamicComponentWithNoSSR/>)
});
return (<>{a}<>)
}
References :
It depends on when the self executing anonymous function is running. It is possible that it is running before window.document
is defined.
In that case, try adding a listener
window.addEventListener('load', yourFunction, false);
// ..... or
window.addEventListener('DOMContentLoaded', yourFunction, false);
yourFunction () {
// some ocde
}
Update: (after the update of the question and inclusion of the code)
Read the following about the issues in referencing DOM elements from a JavaScript inserted and run in head
element:
- “getElementsByTagName(…)[0]” is undefined?
- Traversing the DOM
Try adding the script element just before the /body tag like that
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/quiz.css" />
</head>
<body>
<div id="divid">Next</div>
<script type="text/javascript" src="js/quiz.js"></script>
</body>
</html>
try: window.document......
var body = window.document.getElementsByTagName("body")[0];
Source: Stackoverflow.com