title: Javascript is not working in HTML file
body: <p>I have read through the available links on this topic and they haven't helped. </p>
  
  <p>I'm trying to get the following code to run. The "menu.html" loads the "world.html" in a div on another page, and the HTML comes up, but not the JavaScript.</p>
  
  <p>At first I had the JS in a separate file, but when it wasn't running I moved it into "world.html", but it didn't fix the problem. I have also tried referencing jQuery.</p>
  
  <p>This is menu.html:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;link rel="stylesheet" type="text/css" href="layout.css"&gt;
  
          &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script src="contact.js"&gt;&lt;/script&gt;
          &lt;script src="preparePage.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;a id="infoButton" class="infoButton" href="info.html"&gt;&lt;/a&gt;
          &lt;a id="bodyButton" class="bodyButton" href="body.html"&gt;&lt;/a&gt;
          &lt;a id="enterButton" class="enterButton" onclick="preparePage(); return false;"&gt;&lt;/a&gt;
          &lt;a id="leaveButton" class="leaveButton" href="leave.html"&gt;&lt;/a&gt;
          &lt;a id="contactButton" class="contactButton" onclick="contact(); return false;"&gt;&lt;/a&gt;
      &lt;/body&gt;
  
      &lt;footer&gt;
      &lt;/footer&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And preparePage.js, which gets rid of the menu and loads world.html:</p>
  
  <pre><code>function preparePage() {
      document.getElementById("box").style.backgroundImage = "none";
      $("#infoButton").fadeOut("slow");
      $("#bodyButton").fadeOut("slow");
      $("#leaveButton").fadeOut("slow");
      $("#contactButton").fadeOut("slow");
      $("#box").load("world.html", function enter() {
          $("#enterButton").fadeOut("slow");
      });
  }
  </code></pre>
  
  <p>And last but not least, world.html:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
      &lt;head&gt;
          &lt;script type="text/javascript"&gt;
          function wut() {
              window.alert("owo");
          }
          &lt;/script&gt;
      &lt;/head&gt;
  
      &lt;body onload="wut(); return false;"&gt;
          mhfkhgfhtfjhfjj&lt;br&gt;&lt;br&gt;
          &lt;canvas id="gameBox" width="1000" height="500" style="background-color:#ffffff;"&gt;&lt;/canvas&gt;
      &lt;/body&gt;
  
      &lt;footer&gt;
      &lt;/footer&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>EDIT: Also including launchpad.html, which is the page containing the div in which menu.html and world.html load:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset="UTF-8"&gt;
          &lt;link rel="stylesheet" type="text/css" href="layout.css"&gt;
          &lt;link rel="stylesheet" type="text/css" href="menu.css"&gt;
      &lt;/head&gt;
  
      &lt;body onload="openGame(); return false;"&gt;
          &lt;div id="cloud"&gt;&lt;/div&gt;
          &lt;div id="box" class="box"&gt;&lt;/div&gt;
  
          &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script src="openGame.js"&gt;&lt;/script&gt;
      &lt;/body&gt;
  
          &lt;footer&gt;
          &lt;/footer&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And openGame.js, which changes the shape of #box and loads menu.html:</p>
  
  <pre><code>    function openGame() {
          $("#cloud").fadeOut("fast");
          $("#box").animate({
              height: '750px',
              width: '1700px',
              top: '100px',
              left: '100px',
              padding: '0px'
          });
          $("#box").load("menu.html");
          document.getElementById("box").style.backgroundImage = "url('Images/menuBackground.png')";
      }
  </code></pre>