document.querySelector在.js文件中不起作用

-1

如果var raster = document.querySelector ("canvas")位於HTML文件中，則會定義並聲明柵格。不過，我想在我的js文件中包含所有內容，只有HTML中的函數調用。當我嘗試將var raster...放入.js文件時，它會不斷彈出null。document.querySelector在.js文件中不起作用

有沒有什麼辦法讓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

嘗試移動<script src="IFS.js"></script>對HTML代碼的結束時，關閉<body>標記之前，而不是在具有<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

document.querySelector在.js文件中不起作用

回答

相關問題