can't access variables in another javascript file

Question

So i have link every file needed into the index.html file :

    <script src="jquery.js"></script>
    <script src="notify.js"></script>
    <script src="script.js"></script>

i create an object in 'notify.js' :

    var notify = {
    newNotification : function(text) {
    }
}

script.js :

alert(notify.newNotification);

When i try to access the 'notify' object in 'script.js', it works just fine.But i want to use jquery so i add $(document).ready() to both of the file like this:

notify.js

    $(document).ready (
    function() {
var notify = {
    newNotification : function(text) {
    }
}
}
)

Script.js:

    $(document).ready (
    function() {
alert(notify.newNotification);
    }
)

And after i add that, it comes up with notify is not defined.What's wrong? Can anyone explain why it doesn't work?

Answer 1

As you have defined var notify in notify.js inside $(document).ready( which is an anonymous function and var notify scope is limited to this function only .

So it is not accessible outside the $(document).ready( function

To make accessible outside don't wrap it in $(document).ready( function

like this:-

var notify;
$(document).ready(function () {
    notify = {
        newNotification: function (text) { }
    }
});