Calling a JavaScript function from another function in a different JS file

Question

I have a web page displaying an HTML5 canvas. When the web page loads, the following JavaScript function is called:

window.onload = function(){
    var sources = {};
        sources[0] = document.getElementById("building").src,
        sources[1] = document.getElementById("chair").src,
        sources[2] = document.getElementById("drink").src,
        sources[3] = document.getElementById("food").src,
        sources[4] = document.getElementById("fridge").src,
        sources[5] = document.getElementById("land").src,
        sources[6] = document.getElementById("money").src,
        sources[7] = document.getElementById("oven").src,
        sources[8] = document.getElementById("table").src,
        sources[9] = document.getElementById("van").src,

        sources[10] = document.getElementById("burger").src,
        sources[11] = document.getElementById("chips").src,
        sources[12] = document.getElementById("drink").src,
        sources[13] = document.getElementById("franchiseFee").src,
        sources[14] = document.getElementById("wages").src,

        sources[15] = document.getElementById("admin").src,
        sources[16] = document.getElementById("cleaners").src,
        sources[17] = document.getElementById("electricity").src,
        sources[18] = document.getElementById("insurance").src,
        sources[19] = document.getElementById("manager").src,
        sources[20] = document.getElementById("rates").src,
        sources[21] = document.getElementById("training").src,
        sources[22] = document.getElementById("water").src,

        sources[23] = document.getElementById("burger").src,
        sources[24] = document.getElementById("chips").src,
        sources[25] = document.getElementById("drink").src,

        sources[26] = document.getElementById("creditors").src,
        sources[27] = document.getElementById("electricity").src,
        sources[28] = document.getElementById("food").src,
        sources[29] = document.getElementById("hirePurchase").src,
        sources[30] = document.getElementById("loan").src,
        sources[31] = document.getElementById("overdraft").src,
        sources[32] = document.getElementById("payeTax").src,
        sources[33] = document.getElementById("tax").src

    loadImages(sources, drawImage);
    drawGameElements();
    drawDescriptionBoxes();
};

This function loads some images from the hidden section of the HTML into the JavaScript, and draws them to the canvas by calling the 'drawImage()' function on each image in the 'sources' array. It then calls the 'drawGameelements();' function, which draws a few more things to the canvas, and finally, I then want to call the 'drawDescriptionBoxes()' function.

This function however, is in a separate JS file to the rest of the code, and when I view the page in a browser, although 'loadImages()' and 'drawGameElements()' are called, and draw what they're supposed to to the canvas, I get an error in the console saying:

ReferenceError: drawDescriptionBoxes is not defined

which I assume means that I haven't referenced the function correctly, since it's not in the same file as where I'm calling it.

What I'm wondering is how do I call this function from the other file? Would it be something like: filename.js.drawDescriptionBoxes ?

Filenames don't matter, it's all about what scope the function is in.. — Mike Christensen
– Mike Christensen, Commented Dec 12, 2012 at 22:32
Can you show the code for drawDescriptionBoxes, and how you're including the two javascript files? — Emily
– Emily, Commented Dec 12, 2012 at 22:33
Please, use a loop (over an array with ids, or just over all images) instead of 34 lines of repeating code. — Bergi
– Bergi, Commented Dec 12, 2012 at 22:36

Mike Christensen · Accepted Answer · 2012-12-12 22:49:30Z

There's really two possibilities why the drawDescriptionBoxes function is undefined.

1) It's out of scope

In JavaScript, variables exist in some sort of scope. This maybe global, such as:

<script>
var foo = 123; //foo can be referenced anywhere, it's global!
</script>

Or scoped within another block of code:

function myFunc()
{
   var bar = function () //bar can only be accessed within myFunc
   {

   };
};

//bar() here is undefined

There's a possibility your drawDescriptionBoxes function is not in the global scope.

2) It's not yet defined when your code runs

It's also possible you have some code like this:

File 1

<script>
   var result = someFunc(123);
</script>

File 2

<script>
   function someFunc(x)
   {
      return x * 2;
   }
</script>

If File 2 gets included after File 1, someFunc doesn't yet exist when file 1 is run. You can get around this by running everything after the document fully loads, using event handlers. If var result = someFunc(123); was run in the onload event, it would work fine regardless of what file someFunc was defined in.

Hope this helps!

Igor · Accepted Answer · 2012-12-12 22:44:19Z

0

if drawDescriptionBoxes is defined as a global function, such as

function drawDescriptionBoxes() {
}

then the fact that it is not found means that the javascript file containing it did not load. Show how you include this file in html and how the function is defined.

answered Dec 12, 2012 at 22:44

Igor

15.9k1 gold badge29 silver badges34 bronze badges

1 Comment

Noble-Surfer Over a year ago

Ah excellent, cheers. I'd missed out the line to include the file- I thought I had it there, but that must have been in a older version. Thanks.

Collectives™ on Stack Overflow

Calling a JavaScript function from another function in a different JS file

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related