title: XML http request, document.getelementbyID breaks javascript
body: <p>I'm very new to XML but even so I managed to get a working script thanks to w3school's site that loads in information from the file, here: <a href="http://www.w3schools.com/xml/xml_dom.asp" rel="nofollow">http://www.w3schools.com/xml/xml_dom.asp</a> . Unfortunately I've run into a little issue with a duplicate site and even though I've researched I haven't found an answer why.</p>
  
  <p>The code is identical in a second site of mine besides the elementId names.</p>
  
  <p>I'm using a wamp server, my XML file "PortfolioInfo.xml" is in the same directory as my index.html, I have a  tag inside of a  tag in my xml. I want to insert information from the  tag in my XML into my  HTML tag.</p>
  
  <p>My Javascript is:</p>
  
  <pre><code>if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
    }
  else
    {// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
  xmlhttp.open("GET","PortfolioInfo.xml",false);
  xmlhttp.send();
  xmlDoc=xmlhttp.responseXML;
  
  document.getElementById("contactName").innerHTML=xmlDoc.getElementsByTagName("name")[0].childNodes[0].nodeValue;
  </code></pre>
  
  <p>if I comment out the document.getElementById line the rest of my Javascript code doesn't break if it's not commented out if breaks. I've tried placing it in the HTML file itself at the end of the body tag.</p>
  
  <p>the full HTML is here:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Portfolio: Darrell James&lt;/title&gt;
      &lt;link rel="stylesheet" type="text/css" href="style.css" /&gt;
      &lt;link href='http://fonts.googleapis.com/css?family=Aldrich' rel='stylesheet' type='text/css'&gt;
      &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="home"&gt;
  
  &lt;/div&gt;
  
  &lt;div id="about"&gt;
      &lt;div id="aboutHome"&gt;&lt;span class="arrow"&gt;&lt;&lt;&lt;/span&gt;&lt;/div&gt;
      &lt;div id="aboutSlide"&gt;
          &lt;div id="aboutText"&gt;
              about
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="gallery"&gt;
      &lt;div id="galleryHome"&gt;&lt;span class="arrow"&gt;&lt;&lt;&lt;/span&gt;&lt;/div&gt;
      &lt;div id="gallerySlide"&gt;
          &lt;div id="galleryText"&gt;
              gallery
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="contact"&gt;
      &lt;div id="contactHome"&gt;&lt;span class="arrow"&gt;&lt;&lt;&lt;/span&gt;&lt;/div&gt;
      &lt;div class="nobr" id="contactContent"&gt;
          &lt;span id="contactName"&gt;
          &lt;/span&gt;
      &lt;/div&gt;
      &lt;div id="contactSlide"&gt;
          &lt;div id="contactText"&gt;
              contact
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script src="script.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  
  if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
    }
  else
    {// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
  xmlhttp.open("GET","PortfolioInfo.xml",false);
  xmlhttp.send();
  xmlDoc=xmlhttp.responseXML;
  
  document.getElementById("contactName").innerHTML=xmlDoc.getElementsByTagName("name")[0].childNodes[0].nodeValue;
  
  &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>It's not necessary I use XML but I'd appreciate any help.</p>