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 me         


        

Answer 1

You have declared menuHoverStart inside a function (the anonymous one you pass to the ready ready). That limits its scope to that function and you cannot call it from outside that function.

It doesn't do anything there, so there is no need to hold off on defining it until the ready event fires, so you could just move it outside the anonymous function.

That said, globals are worth avoiding, so you might prefer to define a namespace (to reduce the risk of name collisions) and hang the function off that.

var MYNAMESPACE = {}; // In the global scope, not in a function
// The rest can go anywhere though
MYNAMESPACE.menuHoverStart = function (element, topshift, thumbchange) {

Answer 2

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) {
        // ...
    };
    // ...
});