Javascript 文档未加载答案

【问题标题】：Javascript Document isn't loadingJavascript 文档未加载
【发布时间】：2018-01-14 18:36:22
【问题描述】：

我有一个网页，它正在运行index.html：

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Title</title>
</head>
    <style>@import 'main.css'</style>
    <script src="/socket.io/socket.io.js"></script>
    <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
    <script src="main.js"></script>
<body>
  <canvas id='svs'></canvas>
</body>
</html>

由于某种原因，当我尝试在main.js 中使用c = document.getElementById('svs') 时，它只会返回null。我做错了什么，如何在main.js 中访问document？

编辑：

我正在使用socket.io 和express，并通过res.sendFile 发送index.html。

我正在通过带有express.static 的文件夹发送main.css 和main.js。

【问题讨论】：

您的<script>s 应该进入<head> 或<body>。您的问题的答案是，当 main.js 运行时，<canvas> 尚不存在。在画布后面移动 main.js 行，它应该可以工作。
是的，我可以做到。其中一个答案有效，但感谢您的建议！

标签： javascript html express socket.io

【解决方案1】：

模板应按以下方式布局。样式和脚本标签应位于head标签的翅膀下。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Title</title>

    <style>@import 'main.css'</style>
    <script src="/socket.io/socket.io.js"></script>
    <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
    <script src="main.js"></script>

</head>

<body>
  <canvas id='svs'></canvas>
</body>
</html>

【讨论】：

谢谢！它没有解决问题，但我仍然将style 和script 标签移动到<head>

【解决方案2】：

您可以做的另一件事是将您的代码放在main.js 中的函数内，然后将onload 添加到<body>：

<body onload="yourfunction()">

【讨论】：