.jsファイルでdocument.querySelectorが機能しない

-1

var raster = document.querySelector ("canvas")がHTMLファイルにある場合、ラスタが定義されて宣言されます。しかし、私は私のjsファイルにすべてを持っていたい、私のHTMLの関数呼び出しのみ。 .jsファイルにvar raster...を入れてみると、nullが続きます。.jsファイルでdocument.querySelectorが機能しない

document.querySelectorに関連するHTMLファイルを指す方法はありますか？

// this doesn't work 
//var raster = document.querySelector ("canvas").getContext ("2d"); 

function drawSquare (w,h) { 

raster.fillStyle = "blue"; 
raster.fillRect (0,0,w,h); 
}

<!DOCTYPE html> 

<html> 

    <head> 
     <meta charset="utf-8"> 
     <title>IFS</title> 
     <script src="IFS.js"></script> 
    </head> 

    <body> 
     <canvas width="500" height="500"></canvas> 
     <script>var raster = document.querySelector ("canvas").getContext ("2d"); 
     drawSquare (500,500);</script> 
    </body> 

</html>

出典

2017-03-31 failure

IFS.jsとは何ですか？ – Ouroborus

申し訳ありません。先頭のコード・ブロックは、IFS.jsファイルのコピー・ペーストです。下のブロックはIFS.htmlです。 – failure

あなたのスクリプトファイルは頭の中にあり、要素は体の中にあります。あなたの頭にjavascriptを置くと、その要素は身体の中の要素を見つけようとしているときにはまだ存在しません。 – adeneo

終了<body>タグの前、HTMLコードの末尾に<script src="IFS.js"></script>を移動してみてください、代わりに<head>でそれを持つの。

この問題は、<canvas>がレンダリングされる前にスクリプトが読み込まれたために発生します。したがって、document.querySelector ("canvas")はnullを返します。

出典

2017-03-31 18:31:14 LostMyGlasses

私はそれを疑う。 IFS.jsには、ドキュメントに即座に依存するものはありません。 – Ouroborus

@Ouroborus 'document.querySelector（" canvas "）'はドキュメントに依存しませんか？私は同意しない。 – LostMyGlasses

キャンバスの後でdrawSquare呼び出しが動作する前にsrc = "IFS.js"を入れる。ありがとう、これは非常に教育的です！したがって、JavaScriptは解析してコンパイルしません。私は今参照してください。 – failure

.jsファイルでdocument.querySelectorが機能しない

答えて

関連する問題