title: getElementById is returning null after openeing a new html file
body: <p>I'm loading a new html file after clicking on an image in other html file via javascript. I do this by saying <code>window.location.href="page2.html"</code> Now, when tryign to access an element on page2.html using <code>getElementById()</code> it is always returning null. I figure that my DOM is created from the first page so it's returning null because the id I'm providing is not on the first page, but the second page. How can I refresh my DOM to represent my new page?</p>
  
  <p>My first html page</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;link rel="stylesheet" type="text/css" href="mystyle.css"&gt;
  &lt;head&gt;
      &lt;script src="myScript.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body class="homepage"&gt;
      &lt;header&gt;
          &lt;h1&gt; $ Cheap Gamer $ &lt;/h1&gt;
          &lt;p&gt; Welcome to the best website in the world to find great deals on cheap games &lt;/p&gt;
      &lt;/header&gt;
  
      &lt;ul&gt;
          &lt;h1 id=pcheader&gt; PC Games &lt;/h1&gt;
          &lt;li&gt;Crysis&lt;/li&gt;
          &lt;p&gt;An intense first person shooter. $9.99&lt;/p&gt;
          &lt;img id="1" src="crysis.jpg" onClick="showDetails(id)"&gt;
  
          &lt;li&gt;Battlefield&lt;/li&gt;
          &lt;p&gt;A great multi player experience. $5.99&lt;/p&gt;
          &lt;img id="2" src="bc2.jpg"  onClick="showDetails(bc2)"&gt;
      &lt;/ul&gt;
      &lt;ul&gt;
          &lt;h2 id=mobileheader&gt; Mobile Games &lt;/h2&gt;
          &lt;li&gt;Angry Birds&lt;/li&gt;
          &lt;p&gt; The most popular mobile game of all time! Availabe now for free!&lt;/p&gt;
          &lt;img  id="3" src="angry.jpg" alt="Smiley face" height="42" width="42" onClick="showDetails(angry)"&gt;
  
          &lt;li&gt;Angry Pigs&lt;/li&gt;
          &lt;p&gt; The long awaited follow up the the classic Angry Birds. Now for free!&lt;/p&gt;
          &lt;img   id="4" src="angrybirds.jpg" alt="Smiley face" height="42" width="42" onClick="showDetails(angrybirds)"&gt;
      &lt;/ul&gt;
  
      &lt;footer id="footer"&gt;
          Contact tylerpfaff@gmail.com for any inquries
      &lt;/footer&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>My second html page</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;script src="myScript.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;h1 id=headertext&gt;&lt;/h1&gt;
  &lt;img id=boxart height="500" width="500"&gt;&lt;/img&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>My script file</p>
  
  <pre><code>function showDetails(imgid){
  var imgsrc;
      window.location.href="page2.html"
      alert(imgid);
      switch(imgid)
      {
      case "1":
      alert(document.getElementById("boxart"));
      break;
      case 2:
      imgsrc="BattefieldLarge.jpg"
      break;
  
      case 3:
      imgsrc="AngryBirdsLarge.jpg"
      break;
  
      case 4:
      imgsrc="AngryPigsLarge.jpg"
      break;
  
      }
  
  }
  </code></pre>