title: HTML get value from javascript
body: <p>I've been trying to crunch my head on how to accomplish this:</p>
  
  <p>I'm following this method from w3schools:<br>
  <a href="https://www.w3schools.com/js/tryit.asp?filename=tryjs_variables_create" rel="nofollow noreferrer">https://www.w3schools.com/js/tryit.asp?filename=tryjs_variables_create</a></p>
  
  <p>The HTML and Javascript is seperate.<br><br>
  Is it possible to get the value from the javascript variable upon loading and update it as the variable decreases?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;span id="myField"&gt;&lt;/span&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>var counter= 5;
  document.getElementById("myField").innerHTML = counter;
  </code></pre>
  
  <p>I've attached the javascript by using this method:</p>
  
  <pre><code>&lt;script src="lib/game.js" type="text/javascript"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>I've been getting this error :</p>
  
  <blockquote>
    <p>Uncaught TypeError: Cannot set property 'innerHTML' of null
        at game.js:15</p>
  </blockquote>
  
  <p>Line 15 :</p>
  
  <pre><code>document.getElementById("demo").innerHTML = counter;
  </code></pre>