title: Document is not defined error for 'document.getElementById()'
body: <p>Essentially, I keep getting the message "document is not defined" when I run my .js doc on command line. I'm trying to create a super basic game where the user helps the squirrel get to the chestnuts by using arrow keys. So far I can't move the squirrel yet, and I suspect it has to do with the document is not defined error that I'm getting (lines 1-3 and maybe also 52 in the link).</p>
  
  <p>You can find my code (html, css and js) in the following <a href="http://jsfiddle.net/8Lbkcsq2/" rel="nofollow">jsfiddle link</a></p>
  
  <p>(<a href="http://jsfiddle.net/8Lbkcsq2/" rel="nofollow">http://jsfiddle.net/8Lbkcsq2/</a>)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var squirrelImg = document.getElementById("squirrelImg");
  var forest = document.getElementById("forest");
  var chestnutImg = document.getElementById("chestnutsImg");
  
  var squirrel = {
      name: "Mr. Squirrel",
      has_chestnuts: false,
      hungry: true
  };
  
  var chestnuts = {
      name: "chestnuts"
  };
  
  var positionLeft = 0;
  var positionTop = 0;
  
  function move(e) {
      // 39 for right arrow
      if (e.keyCode === 39) {
          if (positionLeft &lt; 850) {
              positionLeft += 50;
              squirrelImg.style.left = positionLeft + "px";
          }
      }
      // 40 for down arrow
      if (e.keyCode === 40) {
          if (positionTop &lt; 600) {
              positionTop += 50;
              squirrelImg.style.top = positionTop + "px";
          }
      }
      // 37 for left arrow
      if (e.keyCode === 37) {
          positionLeft -= 50;
          if (positionLeft &lt; 0) {
              positionLeft += 50; // CHANGE TO +=50 LATER
          }
          squirrelImg.style.left = positionLeft + "px";
      }
      // 38 for up arrow
      if (e.keyCode === 38) {
          positionTop -= 100;
          if (positionTop &lt; 0) {
              positionTop += 50; // CHANGE TO +=50 LATER
          }
          squirrelImg.style.top = positionTop + "px";
      }
      foundChestnuts();
  }
  
  document.onKeyDown = move();
  
  function foundChestnuts() {
      if ((squirrelImg.style.top == "300px") &amp;&amp; (squirrelImg.style.left == "750px")) {
          squirrel.has_chestnuts = true;
          alert("Thank you for helping Mr. Squirrel find his chestnuts!");
          var eat = confirm("Should Mr.Squirrel eat his chestnuts?");
          if (eat === true) {
              alert("Time to eat!");
              alert("Yum! Mr. Squirrel isn't hungry anymore!");
          } else {
              alert("I guess Mr. Squirrel can wait a little longer...");
          }
      } else {
          squirrel.has_chestnuts = false;
      }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
      background-color: #b5916c;
  }
  h3 {
      font-weight: bold;
      text-decoration: underline;
  }
  p {
      font-family:'Dancing Script', cursive;
      font-size: large;
  }
  #forest {
      background-image: url(http://s21.postimg.org/jyht762hj/forestfloor.jpg);
      width: 850px;
      height: 600px;
      position: relative;
      /*opacity: 0.5;*/
  }
  #squirrelImg {
      position: absolute;
      background-image: url(http://s24.postimg.org/wkqh9by4x/squirrel.png);
      height: 100px;
      width: 100px;
      left: 0;
      top: 0;
  }
  #chestnutsImg {
      position: absolute;
      background-image: url(http://s28.postimg.org/kgiubxhnd/chestnuts.jpg);
      height: 100px;
      width: 100px;
      left: 750px;
      top: 300px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
       &lt;h3&gt;A Plea from Mr. Squirrel:&lt;/h3&gt;
  
      &lt;p&gt;My dearest human,&lt;/p&gt;
      &lt;p&gt;I seem to have misplaced my chestnuts and I am quite famished.&lt;/p&gt;
      &lt;p&gt;Would you mind assisting me in locating them?&lt;/p&gt;
      &lt;p&gt;Much obliged!&lt;/p&gt;
      &lt;div id="forest"&gt;
          &lt;div id="squirrelImg"&gt;&lt;/div&gt;
          &lt;div id="chestnutsImg"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>