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?

Is menuHoverStart declared in the global scope?

Andy E
– Andy E

2010-12-02 12:45:04 +00:00
Commented Dec 2, 2010 at 12:45 — Andy E
– Andy E, Commented Dec 2, 2010 at 12:45
possibly not - how do I go about doing that?

Tom
– Tom

2010-12-02 12:48:03 +00:00
Commented Dec 2, 2010 at 12:48 — Tom
– Tom, Commented Dec 2, 2010 at 12:48

jwueller · Accepted Answer · 2010-12-02 12:48:12Z

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

Quentin · Accepted Answer · 2010-12-02 12:48:52Z

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) {

Collectives™ on Stack Overflow

Calling a javascript function from another .js file

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related