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文件中不起作用

回答

相关问题