title: Uncaught TypeError: Cannot read property 'style' of null
body: <p>I have this function that reads coordination from a XML file, the function works fine when its loose in the window. but when I put it inside a function, then I get the error. <code>Cannot read property 'style' of null.</code> on row 127.</p>
  
  <p>The row 127 is </p>
  
  <pre><code>document.getElementById(id).style.top=Ynod;
  </code></pre>
  
  <p>Any ideas ?</p>
  
  <pre><code>var main = (function () {
  
      var id=Math.floor((Math.random()*1000000)+1);
  
  
      document.getElementById("add-new-sticker-btn").addEventListener("click", function(){
          id += 1;
          console.log(id);
          add_sticker(""); /**"" removes undefined "*/
  
          var xmlhttp;
          xmlhttp=new XMLHttpRequest();
          xmlhttp.open("POST","/project2/php/insert.php",true); /*Search way... JS to javaScript*/
          xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
          xmlhttp.send("textBoxID="+id);
      });
  
  
      function run() {
          readXml();
      }
  
      function readXml() {
          var xmlhttp;
          xmlhttp = new XMLHttpRequest();
          xmlhttp.open("get", 'xml/stickers.xml', false);
          xmlhttp.send();
          var myXML = xmlhttp.responseXML;
          stickers = myXML.getElementsByTagName("sticker");
  
          for (i = 0; i &lt; stickers.length; i++) {
              var idNod = (stickers[i].getElementsByTagName("id")[0].childNodes[0].nodeValue); /*Get the ID*/
              var id = idNod;
              var textNod = (stickers[i].getElementsByTagName("text")[0].childNodes[0].nodeValue); /* Text*/
              add_sticker(textNod); /*Call creator function*/
  
              var Xnod = (stickers[i].getElementsByTagName("x")[0].childNodes[0].nodeValue) + 'px'; /*Get the x position Add PX for pixel*/
              var Ynod = (stickers[i].getElementsByTagName("y")[0].childNodes[0].nodeValue) + 'px'; /*Get the y position*/
              var Znod = (stickers[i].getElementsByTagName("z")[0].childNodes[0].nodeValue); /*Get the y position*/
              console.log(Ynod) // Gives correct Y and X
              console.log(Xnod)
  
              document.getElementById(id).style.top = Ynod;
              document.getElementById(id).style.left = Xnod;
              document.getElementById(id).style.zIndex = Znod;
          }
      }
  
      window.addEventListener("load", run);
      return {};
  }());
  </code></pre>