1

我有一个显示 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？

4

2 回答 2

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>

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

希望这可以帮助！

于 2012-12-12T22:44:20.583 回答
0

ifdrawDescriptionBoxes定义为全局函数，例如

function drawDescriptionBoxes() {
}

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

于 2012-12-12T22:44:19.477 回答