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

我有一个显示HTML5画布的网页。当网页加载，下面的JavaScript函数被调用：从另一个JS文件中的另一个函数调用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的隐藏的部分一些图像，并通过调用它们绘制在画布“的drawImage（）”函数在'sources'数组中的每个图像上。然后它调用'drawGameelements（）;'函数，它将更多的东西绘制到画布上，最后，我想调用'drawDescriptionBoxes（）'函数。然而，这个函数是在一个单独的JS文件中的其余代码，并且当我在浏览器中查看页面时，虽然调用了'loadImages（）'和'drawGameElements（）'，并绘制它们“再应该到画布上，我在控制台中的错误说：

ReferenceError: drawDescriptionBoxes is not defined

我假设意味着我没有正确引用的函数，因为它在同一个文件不是因为我在那里称它。

我想知道的是如何从另一个文件中调用此函数？它会是这样的：filename.js.drawDescriptionBoxes？

来源

2012-12-12 someone2088

文件名无所谓，它全都是关于函数的作用域。 –

您可以显示drawDescriptionBoxes的代码，以及如何包含这两个JavaScript文件？ – Emily

请使用循环（通过带有ID的数组，或者遍布所有图像），而不是使用34行重复代码。 – Bergi

如果drawDescriptionBoxes被定义为一个全局函数，如

function drawDescriptionBoxes() { 
}

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

来源

2012-12-12 22:44:19 Igor

啊优秀，欢呼声。我错过了包含该文件的行 - 我认为我已经在那里了，但那肯定是旧版本的。谢谢。 – someone2088

为什么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，someFunc在文件1运行时尚不存在。您可以通过运行之后的所有文件，使用事件处理程序在文件完全加载后解决此问题。如果var result = someFunc(123);在onload事件中运行，它会很好地工作是什么文件someFunc无论在定义。

希望这有助于！

来源

2012-12-12 22:44:20

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

回答

相关问题