Calling a javascript function from another .js file

Question

I have two external .js files. The first contains a function. The second calls the function.

file1.js

$(document).ready(function() {      function menuHoverStart(element, topshift, thumbchange) {          ... function here ...      }   }); 

file2.js

$(document).ready(function() {      setTimeout(function() { menuHoverStart("#myDiv", "63px", "myIMG"); },2000);   }); 

The trouble is that this is not running the function. I need the two separate files because file2.js is inserted dynamically depending on certain conditions. This function works if I include the setTimeout... line at the end of file1.js

Any ideas?

Answer 1

The problem is, that menuHoverStart is not accessible outside of its scope (which is defined by the .ready() callback function in file #1). You need to make this function available in the global scope (or through any object that is available in the global scope):

function menuHoverStart(element, topshift, thumbchange) {     // ... }  $(document).ready(function() {     // ... }); 

If you want menuHoverStart to stay in the .ready() callback, you need to add the function to the global object manually (using a function expression):

$(document).ready(function() {     window.menuHoverStart = function (element, topshift, thumbchange) {         // ...     };     // ... });