AndreaNobili AndreaNobili - 1 year ago 51
HTML Question

Why I can't access to a JavaScript function defined into a .js file from another .js file?

I am pretty new in JavaScript and I was doing some experiment about the global scope following a tutorial.

In this tutorial I have 3 files:

1) index.htm:

<html>
<head></head>

<body>
<h1>HELLO WORLD !!!</h1>

<script src="app.js"></script>
<script src="utility.js"></script>

</body>
</html>


As you can see I include 2 JavaScript file.

2) app.js:

var person = 'Torny'; // When I call the logPerson() function this line override the person variable value into the global stack

//console.log(person);

logPerson();


3) utility.js in which is defined the logPerson() function defined into the app.js file:

var person = 'Steve';

function logPerson() {
console.log(person);
}


Ok so I expcted the following behavior:

Into the app.js file set the string 'Tony' as value of the person variable, the call the logPerson() function declared into the utility.js file and so print 'Tony' in the console.

The problem is that when I try to open the index.htm file into FireFox, I go into FireBug console and instead the 'Tony' value I obtain this error message:

ReferenceError: logPerson is not defined


So it seems that from the app.js file it can't see the logPerson() function that is defined into the utility.js file and imported.

Why? What am I missing? what is wrong?

Answer Source

In javascript the order of the files matters. You need to load the script which defines your function before you can use it. Switch the 2 <script> tags

<body>
    <h1>HELLO WORLD !!!</h1>

    <script src="utility.js"></script>
    <script src="app.js"></script>

</body>
</html>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download