ReferenceError document is not defined in plain JavaScript

Question

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    lt  DOCTYPE html gt   lt html gt   lt head lang  en  gt       lt meta charset  UTF-8  gt       lt title gt  lt  title gt       lt link rel  stylesheet  type  text css  href  css quiz css    gt       lt script type  text javascript  src  js quiz js  gt  lt  script gt   lt  head gt   lt body gt        lt div id  divid  gt Next lt  div gt    lt  body gt   lt  html gt    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  lt  questions choices length  i  1                        body innerHTML                                lt input type   radio   name   sex   value   male   gt                                  questions choices i      lt br gt                                                            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

User · Answer

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

User · Answer

Try adding the script element just before the  body tag like that   lt  DOCTYPE html gt   lt html gt   lt head lang  en  gt       lt meta charset  UTF-8  gt       lt title gt  lt  title gt       lt link rel  stylesheet  type  text css  href  css quiz css    gt   lt  head gt   lt body gt        lt div id  divid  gt Next lt  div gt       lt script type  text javascript  src  js quiz js  gt  lt  script gt   lt  body gt   lt  html gt

User · Answer

try  window document        var body   window document getElementsByTagName  body   0

User · Answer

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      gt  import     components List        ssr  false     export default      gt   lt DynamicComponentWithNoSSR   gt    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    lt  gt Some JSX lt   gt   export default function App      a setA    useState    useEffect      gt        setA  lt DynamicComponentWithNoSSR  gt           return   lt  gt  a  lt  gt       References     https   nextjs org docs advanced-features dynamic-import with-no-ssr https   reactjs org docs hooks-effect html

[javascript] ReferenceError: document is not defined (in plain JavaScript)

Examples related to javascript