在HTML中实现JS

Implement JS in HTML

本文关键字：JS 实现 HTML      更新时间：2023-09-26

这应该很容易，但尽管应该很容易，我还是解决不了这个问题。

如果我在在线编辑器中键入以下HTML和JS代码，一切都很好，但如果我把它输入到我的（离线）编辑器中，它就不起作用了。这是在线代码：http://jsbin.com/kenurunahu/1/edit?html，js，输出）

我打赌这与加载顺序和文件的链接方式有关。

这就是我的（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为null"，但如果我在控制台中写入相同的代码，一切都会正常工作。

在浏览器完全加载html dom之前加载js脚本时会出现错误。测试的一个简单解决方案是将脚本include放在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="yourFunc()">

或者，通过只使用js代码，例如使用jquery ready函数，或者通过编写一个应该在所有主要浏览器上工作的简单自定义处理程序，事件会更好：

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

希望能有所帮助。

几个猜测：

  1. 资本化很重要。如果文件名为script.js，则不要链接到Script.js

  2. 你的js文件和index.html文档在同一个文件夹中吗？因为你就是这么说的。

通常，我们将文件结构安排为这样：

public_html - css - js - img - inc

如果样式/脚本存储在子文件夹中，如js和css，则必须将引用修改为：

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

作为一种好的做法，您的脚本应该放在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>

相关文章：