Question

so I have a .js file that is included into my html

If I put this inside my .js file,

$(document).ready(function(){    
      var siteRoot = $('.site-root').val();
      alert(siteRoot);
});

the code would alert the value properly, but if I do this:

var siteRoot = $('.site-root').val();
$(document).ready(function(){
      alert(siteRoot);
});

it would alert undefined instead

is there a way to have something that’s in $(document).ready() access variables outside it since if I put the variable inside $(document).ready() it wouldn’t be accessible from other js files

Answer 1

You can either make it a global:

// this is the same as your example, 
// just wanted to stress that it's a part of the window (global) object
window.siteRoot = $('.site-root').val();
$(document).ready(function(){
      alert(window.siteRoot);
});

Or even better, use some kind of namespace, like this:

var MyData = {};
MyData.siteRoot = $('.site-root').val();

$(document).ready(function(){
  alert(MyData.siteRoot);
});