CODEWITHSUNDEEP
javascriptjquery
FooBar
FooBar

Reputation: 6138

Running function from external JS-file when loaded in footer

Let's say we have the following page:

<html>
    <head>
    </head>
    <body>

    <script src="jQuery.js"></script>
    <script src="myFile.js"></script>
    <script>
        $(document).ready(function() {
            test();
        });
    </script>
    </body>
</html>

And myFile.js looks like this:

$(document).ready(function() {
    function test() {
        alert('Hello World!');
    }
});

Then console.log will output the following error:

Uncaught ReferenceError: test is not defined

I'd rather not include my .JS files in <head> (which I think will solve the problem) since it is more clean to load it after HTML, in footer of page.

Any ideas how to wait for test(); to run, till myFile.js is loaded?

Upvotes: 0

Views: 982

Answers (1)

Kevin B
Kevin B

Reputation: 95062

You need to define test on the global scope if you want to use it elsewhere. Also, you don't need to wait for the document to be ready if you're code is in the footer.

//$(document).ready(function() {
    function test() {
        alert('Hello World!');
    }
    // add it to global scope
    // window.test = test;
//});

and

<script>
    //$(document).ready(function() {
        test();
    //});
</script>

Upvotes: 2

Related Questions