1

HTML5 キャンバスを表示する Web ページがあります。Web ページが読み込まれると、次の 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関数が定義されていない理由は、実際には 2 つの可能性があります。

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 に答える