从另一个JS文件中的另一个函数调用JavaScript函数

时间:2012-12-12 22:31:18

标签: javascript

我有一个显示HTML5画布的网页。加载网页时,将调用以下JavaScript函数:

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();
};

此函数将HTML的隐藏部分中的一些图像加载到JavaScript中,并通过在'sources'数组中的每个图像上调用'drawImage()'函数将它们绘制到画布上。然后它调用'drawGameelements();'函数,它向画布绘制了更多东西,最后,我想调用'drawDescriptionBoxes()'函数。

然而,这个函数与其他代码在一个单独的JS文件中,当我在浏览器中查看页面时,虽然调用了'loadImages()'和'drawGameElements()',并绘制了它们'应该到画布上,我在控制台中收到错误说:

  

ReferenceError:未定义drawDescriptionBoxes

我认为这意味着我没有正确引用该函数,因为它与我调用它的文件不在同一个文件中。

我想知道的是如何从其他文件中调用此函数?会是这样的:filename.js.drawDescriptionBoxes

2 个答案:

答案 0 :(得分:2)

drawDescriptionBoxes函数未定义的确有两种可能性。

1)超出范围

在JavaScript中,变量存在于某种范围内。这可能是全球性的,例如:

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

或在另一段代码范围内:

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

   };
};

//bar() here is undefined

您的drawDescriptionBoxes功能可能不在全球范围内。

2)代码运行时尚未定义

你也可能有这样的代码:

文件1

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

文件2

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

如果文件2在文件1之后被包含,则在运行文件1时,someFunc尚不存在。您可以使用事件处理程序在文档完全加载后运行所有内容来解决此问题。如果在onload事件中运行var result = someFunc(123);,则无论在哪个文件someFunc中定义,它都可以正常工作。

希望这有帮助!

答案 1 :(得分:0)

如果将drawDescriptionBoxes定义为全局函数,例如

function drawDescriptionBoxes() {
}

然后找不到它的事实意味着包含它的javascript文件没有加载。显示如何在html中包含此文件以及如何定义函数。