title: How do I display a javascript variable in a webpage via HTML?
body: <p>I'm new to coding so sorry if I'm doing it all wrong, and I know this is very basic.</p>
  
  <p>I'm trying to get a string of text to appear in a webpage using a variable defined in JavaScript in HTML. I've done this so far but the content area is still empty, I don't know where I'm going wrong. I need the var biography to display in the content div when the page is first requested and whenever the button is clicked. Thanks in advance for any help.
  HTML code:</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
      &lt;html&gt;
  
      &lt;head&gt;
      &lt;title&gt; Katie Jeynes &lt;/title&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
      &lt;/head&gt;
  
      &lt;body onload="displayBiography();"&gt;
  
      &lt;div id="leftBar"&gt; 
      &lt;button class="button" onclick="displayBiography();"&gt; Biography 
      &lt;/button&gt;
      &lt;/div&gt;
  
      &lt;div id="content" &gt; 
      &lt;script src="myJS.js"&gt; &lt;/script&gt;
      &lt;script&gt; displayBiography();&lt;/script&gt;
      &lt;/div&gt;
  
  
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p>JS code:</p>
  
  <pre><code>    var content = document.getElementByID("content");
  
      var biography = "&lt;p&gt; Katie Jeynes is currently in her 3rd year of 
      study"+ 
      "undergraduate study etc &lt;/p&gt;"
      ;
  
  
      function displayBiography() {
          "use strict";
          content.innerHTML = biography;
      }
  </code></pre>