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 ?

Answer 1

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.