1

外部の .js ファイルから関数を呼び出そうとしていますが、コンソールがエラーを返し、関数が呼び出されていません。コードを修正して、関数を正しく呼び出すにはどうすればよいですか。

メインの .html ファイルは次のとおりです。

<html>
<head>
    <script type="text/javascript" src="xp.js">
    </script>
    <script type="text/javascript">
        window.onload = xyz.makeShape.Circle();
    </script>
</head>
<body>
    <canvas id="xyz" width="600" height="600"></canvas>
</body>
</html>

.js ファイルは次のとおりです。

var xyz = xyz || {};
var canvas = document.getElementById('xyz');
var context = canvas.getContext('2d');
xyz.makeShape = {
    Circle : function() {
        console.log('working');
    }
}



EDIT

コンソールに 2 つのエラーが表示されます:

エラー 1 

TypeError: canvas is null
window.onload = xyz.makeShape.Circle;


エラー 2 

TypeError: xyz.makeShape is undefined
window.onload = xyz.makeShape.Circle;
4

3 に答える 3

5

これを変える：

window.onload = xyz.makeShape.Circle();

これに：

window.onload = xyz.makeShape.Circle;

window.onload関数呼び出しの結果ではなく、関数参照に設定する必要があります。

<head>DOM が読み込まれる前に、セクションから次の 2 行を実行することもできません。

var canvas = document.getElementById('xyz');
var context = canvas.getContext('2d');

DOM がロードされた後にそれらを実行する必要があります。それを行うための可能な戦略は複数あります。DOM が既にそこにロードされていることがわかっているので、既に持っているものにとって最も簡単なのは、onload ハンドラーでそれらを実行することです。外部の .js ファイルをロードするスクリプト タグを<body>セクションの最後に移動することもできます。そうすれば、その js ファイルが実行されたときに DOM の準備が整います。

于 2013-03-30T18:33:52.200 に答える
0

タグを使用して、ヘッダーまたはフッターのいずれかにjsファイルを含める必要があります。<script>

<script type="text/javascript" src="js/yourjsfile.js"></script>

現在のファイルにあるかのように、そのスクリプトから関数を呼び出すことができます

編集

ファイルが既に含まれていることが確実な場合 (最初にパスが正しいことを確認してください)、次に、含まれているファイルから発生している可能性のあるエラーからコンソールをチェックする必要があります。あなたが提供したコードは正しく見えます。

于 2013-03-30T18:29:14.250 に答える
0

外部js:

var xyz = xyz || {};
xyz.makeShape = {
    Circle: function () {
        console.log('working');
    }
}

内部js:

window.onload = function () {
    var canvas = document.getElementById('xyz');
    var context = canvas.getContext('2d');
    xyz.makeShape.Circle();

}

テスト済みで動作します

于 2013-03-30T18:56:30.383 に答える