title: getElementById TypeError: "cannot set property 'innerHTML' of null
body: <p>I'm a beginner HTML learner and I was self-taught on the way through. This is the first website I have ever done by scratch (using HTML and CSS and JS). I looked around on this site at the other questions and answers regarding this, but I'm running into an issue the other answers don't resolve. Many of the answers suggest that a "window.onload = function() { JavaScript }" will resolve the issue, but I have more than one possible function in a given page. I'm using innerHTML to load body content, while the background and navigation is consistent in the webpage.</p>
  
  <p>I have four buttons with four different functions: "Home Page, About, Videos, Research and Development"; with respective functions: "load_home(), load_about(), load_media(), and load_research()."</p>
  
  <p>I have it so it looks like this:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;link rel="stylesheet" type="text/css" href="Script\jquery-ui-1.11.2.custom\jquery-ui.theme.css"&gt;
  &lt;link language="JavaScript"type="text/css" rel="stylesheet" href="Script\jquery-ui-1.11.2.custom\jquery-ui.css"&gt;&lt;/link&gt;
  &lt;script language="JavaScript" type="text/javascript" src="Script\jquery-ui-1.11.2.custom\external\jquery\jquery.js"&gt;&lt;/script&gt;
  &lt;script language="JavaScript" type="text/javascript" src="Script\jquery-ui-1.11.2.custom\jquery-ui.js"&gt;&lt;/script&gt;
  &lt;script language="JavaScript" type="text/javascript"&gt;
      $(function() {
          $( "input[type=submit], a, button" )
          .button()
          .click(function( event ) {
              event.preventDefault();
          });
      });
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="start"&gt; &lt;!--start refers to the CSS scope I added to the jQuery UI I have added for the buttons in my navigation--&gt;
  &lt;nav&gt;
  &lt;button onclick="load_home()" class=""&gt;Home Page&lt;/button&gt;
  &lt;button onclick="load_about()" class=""&gt;About &lt;/button&gt;
  &lt;button onclick="load_media()" class=""&gt;Videos&lt;/button&gt;
  &lt;button onclick="load_research()" class=""&gt;Research and Development&lt;/button&gt;
  &lt;/nav&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;script type="text/javascript"&gt; 
      function load_home() {
          document.getElementById("content1").innerHTML='&lt;object type="text/html" data="Home.html"&gt;&lt;/object&gt;';
              } 
      function load_about() {
          document.getElementById("Body").innerHTML='&lt;object type="text/html" data="About Golding Lights.html"&gt;&lt;/object&gt;';
              } 
      function load_media() {
          document.getElementById("Body").innerHTML='&lt;object type="text/html" data="Media.html"&gt;&lt;/object&gt;';
              } 
      function load_research() {
          document.getElementById("Body").innerHTML='&lt;object type="text/html" data="Research and Development.html"&gt;&lt;/object&gt;';
              } 
  &lt;/script&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I've used this function before in another website I was going to develop, and it worked just fine. Hopefully there are some answers that can help me. Thanks.</p>