Question

如果var raster = document.querySelector ("canvas")位于HTML文件中，则会定义并声明栅格。但是，我想在我的js文件中包含所有内容，只在我的HTML中调用函数。当我尝试将var raster...放在.js文件中时，它会不断出现null。

有没有办法让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>

Answer 1

尝试在结束<script src="IFS.js"></script>代码之前将<body>移至HTML代码的末尾，而不是将其放在<head>。

问题是由于脚本在呈现<canvas>之前加载，因此document.querySelector ("canvas")会返回null。

document.querySelector不能在.js文件中工作

1 个答案: