Cannot access variables in another javascript file

Question

So, I have a link to each file needed in 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 files, like this:

notify.js

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

script.js

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

And after I add this, it appears with a notification, not defined. What's wrong? Can someone explain why it is not working?

Answer 1

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

Thus, it is not available outside the $(document).ready(

To make it accessible from the outside, do not wrap it in the $(document).ready(

like this: -

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

Answer 2

Like everyone else, it’s already stated here: use only $().ready when you are processing DOM-Elements and your variable is not available because you used the var keyword (as intended). The var keyword restricts certain variables to the current scope, which is the scope of the anonymous function that you use as the DOM-Ready-Handler.

So, removing unnecessary $().read will be a temporary solution to your problem.

BUT (!) You must turn your code into locks to avoid the uselessness of the global scope and to avoid possible name conflicts with third-party code.

Like:

notify.js

 ;(function ($, window, undefined) { var notify = { newNotification : function(text) { return text; } }; })(jQuery, this); 

script.js

 ;(function ($, window, undefined) { alert(notify.newNotification()); })(jQuery, this); 

So, now you will have the same problem as before, you do not have access to your object.

Of course, you can simply add your notify object to the global scope, as Arun P. Johnny suggested in your answer, but I'm sure you will need to do global access for a longer time. If you put each of them in the global scope, you will again begin to fill the global scope, so my recommendation will be ONE global object that will contain all the other objects / variables that you need around the world. (Or even better, use something like requirejs

Something like that:

main.js

 ;var MyApp = {}; # Only variable in global scope # Maybe some more initalization code here, dunno 

notify.js

 ;(function ($, window, undefined) { MyApp.notify = { newNotification : function(text) { return text; } }; })(jQuery, this); 

script.js

 ;(function ($, window, undefined) { alert(MyApp.notify.newNotification()); })(jQuery, this); 

Some interesting Q / A questions about scope and closures are here in stackoverflow:

• What is the scope of variables in JavaScript?
• How do JavaScript locks work?
• JavaScript shutdown against anonymous functions

Good answer about interacting with a global scope:

• What is meant by a "leak" into a global area?

Answer 3

In this case, there is no need to wrap the notification object in dom ready ... because from its appearance you do not create a link to the dom element when creating the object ... the only thing that matters is any invokation method that deals with the dom element should be done on dom ready.

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

if you declare a variable inside the dom handler, then it becomes a local variable for the dom handler ... so it will not be available outside the dom handler ...

Another solution is to add a variable to the global area inside the dom descriptor, for example

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

or

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

Answer 4

You need only one document.ready And this only declares variables that will freely move through their scripts.

See an example:

script.js

 $(document).ready(function(){ // declare the variables as global $.varA, $.varB, $.varC; }); 

notify.js:

 function doNotify(){ // your code here $.varA = /*your code here */ } function otherFunc(txt){ // your code here $.varB = txt; } 

Answer 5

All your Java scripts will be loaded before the document is ready.

Create a separate function in script.js that references the notify object, then call this function from $(document).ready

Answer 6

Try it.

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