title: accessing variable outside of $(document).ready() & jquery
body: <p>so I have a .js file that is included into my html</p>
  
  <p>If I put this inside my .js file,</p>
  
  <pre><code>$(document).ready(function(){    
        var siteRoot = $('.site-root').val();
        alert(siteRoot);
  });
  </code></pre>
  
  <p>the code would alert the value properly, but if I do this: </p>
  
  <pre><code>var siteRoot = $('.site-root').val();
  $(document).ready(function(){
        alert(siteRoot);
  });
  </code></pre>
  
  <p>it would alert undefined instead</p>
  
  <p>is there a way to have something that's in <code>$(document).ready()</code> access variables outside it since if I put the variable inside <code>$(document).ready()</code> it wouldn't be accessible from other js files </p>