從另一個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函數

回答

相關問題