title: Global var, correct way or any workaround? (before DOM ready)
body: <p>Have been trying to set a global var in javascript to be access from another function,<br>
  but there is a particular global var that I can't access, it returns null.<br>
  It works if i declare the var in the function itself.  </p>
  
  <p>Note: I am unable to use any js library.</p>
  
  <p>This does not works:</p>
  
  <pre><code>var xhttp = new XMLHttpRequest(); &lt;-- this works as the request in the function runs.
  var DialogBody = document.getElementById("DialogBody");//&lt;-- this is the problem
  
  function fetchDialog() {
      url = "../message/user_status.php";
      xhttp.open('POST',url,true);
      xhttp.send();
      xhttp.onreadystatechange = function() {
          if(xhttp.readyState == 4 &amp;&amp; http.status == 200) {
              showOverlay();
              console.log("OK");// returns ok.
              /*below all return error*/
              DialogBody.innerHTML = "TEST";//&lt;-- error: Cannot set property 'innerHTML' of null
          }
      }   
  }
  </code></pre>
  
  <p>This works:</p>
  
  <pre><code>function fetchDialog() {
      url = "../message/user_status.php";
      var DialogBody = document.getElementById("DialogBody");     
      xhttp.open('POST',url,true);
      xhttp.send();
      xhttp.onreadystatechange = function() {
          if(xhttp.readyState == 4 &amp;&amp; http.status == 200) {
              showOverlay();
              console.log("OK");// returns ok.            
              DialogBody.innerHTML = "TEST";//This works.
          }
      }   
  }   
  </code></pre>
  
  <p>So my question is, how do I set that var as global instead of in function.</p>
  
  <p>EDIT:(Solves by links provided by SO user.) &lt;- not what I want.</p>
  
  <pre><code>var xhttp = new XMLHttpRequest();
  var DialogBody;
  document.addEventListener("DOMContentLoaded", function(event) {
  DialogBody = document.getElementById("DialogBody ");
  });
  
  function fetchDialog() {
      url = "../message/user_status.php";
      xhttp.open('POST',url,true);
      xhttp.send();
      xhttp.onreadystatechange = function() {
          if(xhttp.readyState == 4 &amp;&amp; http.status == 200) {
              showOverlay();
              //console.log("OK");
              DialogBody.innerHTML = "TEST";
          }
      }   
  }
  </code></pre>
  
  <p>UPDATE:(What I actually wanted.)  </p>
  
  <p>A little not so pretty workaround is this though it might be frown upon.
  What I was actually trying to achieve is to set global var (consolidated).<br>
  I end up using eval() to set those var as string to achieve what I want and I find myself it very useful.</p>
  
  <p>javascript concept</p>
  
  <pre><code>/.....
  var xhttp = new XMLHttpRequest();
  DialogBody = 'document.getElementById("DialogBody")';
  //or DialogBody = 'document.getElementById("DialogBody").innerHTML';
  
  function fetchDialog() {
      url = "../message/user_status.php";
      xhttp.open('POST',url,true);
      xhttp.send();
      xhttp.onreadystatechange = function() {
          if(xhttp.readyState == 4 &amp;&amp; http.status == 200) {
              showOverlay();
              //console.log("OK");
              eval(DialogBody).innerHTML="Test";
              //or eval(DialogBody) = "a message that is dynamically generated";
              //eval(DialogBody).className="Whatever";
          }
      }   
  }
  </code></pre>
  
  <p>actual scenario.</p>
  
  <p>user_status.php</p>
  
  <pre><code>//..query ends.
  &lt;div id="DialogTitleMessage"&gt;
      &lt;?php echo $DialogTitle;?&gt;
  &lt;/div&gt;
  &lt;div id="DialogBodyMessage"&gt;
      &lt;?php echo $DialogTitle;?&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>actual javascript</p>
  
  <pre><code>//.....
  var xhttp = new XMLHttpRequest();
  DialogBody = 'document.getElementById("DialogBody")';
  DialogTitle = 'document.getElementById("DialogTitle")';
  DialogTitleMessage = 'document.getElementById("DialogTitleMessage")';
  
  function fetchDialog() {
      url = "../message/user_status.php";
      xhttp.open('POST',url,true);
      xhttp.send();
      xhttp.onreadystatechange = function() {
          if(xhttp.readyState == 4 &amp;&amp; http.status == 200) {
              showOverlay();
              eval(DialogBody).innerHTML = xhttp.responseText;
              eval(DialogTitle).innerHTML = eval(DialogTitleMessage).innerHTML;
          }
      }   
  }
  </code></pre>