Question

应该很容易，但它应该很容易，我无法解决问题。

如果我在在线编辑器中输入以下HTML和JS代码，一切正常，但如果我在我的（离线）编辑器中键入它，它将无法正常工作。这是在线代码： http://jsbin.com/kenurunahu/1/edit?html,js,output）

我敢打赌它与加载顺序以及文件的链接方式有关。

这是我的（lokal）HTML文件的样子（文件链接的位置）：

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" content="Index.css">
  <script src="Script.js"></script>
</head>

<body>
  <p id="demo">
    something
  </p>
</body>

</html>

非常感谢您的帮助！

[更新] Firefox和Chrome显示JS文件。有时我收到一条错误消息“innerHTML is null”，但如果我将相同的代码写入控制台，一切正常。

Answer 1

在浏览器完全加载html dom之前加载js脚本时出现错误。一个简单的测试解决方案是将脚本包含在html页面的末尾，如下所示：

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" content="Index.css">
</head>

<body>
  <p id="demo">
    something
  </p>
  <script src="Script.js"></script>
</body>

</html>

更好的解决方案是仅在dom完全加载时运行脚本。例如，使用body onload事件：

<body onload="yourFunc()">

或者通过仅使用js代码来改善事件，例如使用jquery ready函数或编写一个应该适用于所有主流浏览器的简单自定义处理程序：

document.addEventListener("DOMContentLoaded", function(event) { 
  //call your func here
});

希望有所帮助。

Answer 2

一些猜测：

资本化非常重要。如果文件名为script.js，则不要链接到Script.js
您的js文件是否与index.html文档位于同一文件夹中？因为这就是你所说的。

通常，我们将文件结构安排如下：

public_html - css - js - img - inc

如果您的样式/脚本存储在子文件夹中，例如js和css，那么您必须修改对以下内容的引用：

<link rel="stylesheet" content="css/Index.css">
<script src="js/Script.js"></script>

Answer 3

作为一种良好做法，您的脚本应放在body标记的结尾处。外部脚本是阻塞的，因此我们不会将它们放在顶部是有意义的。此外，当您的script位于顶部时，您的DOM可能尚未就绪，这意味着您的脚本尝试访问的任何元素可能根本不存在于DOM中，这会导致您的错误。

因此，您的所有脚本都应该在body标记的结尾处。这样，当脚本加载并运行时，您可以确信DOM已准备就绪。

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" content="Index.css">

</head>

<body>
  <p id="demo">
    something
  </p>
  <script src="Script.js"></script>
</body>

</html>

用HTML实现JS

3 个答案: