Question

我只是想深入了解JS和HTML的绝对基础知识。基本上我想执行一个超级简单的js。这是我的test.js文件：

document.getElementById("test").innerHTML = "Loaded js file";

这是我的test.html：

<!DOCTYPE HTML>
<html lang="de">
<head>
<title>Testing page</title>

<meta charset="utf-8">
<script type="text/javascript" src="test.js"></script>
</head>
<body>

    <p id="test">Not loaded</p>

</body>
</html>

两个文件都位于同一文件夹中。应该发生的是“未加载”文本被“加载的js文件”替换，但它不会发生。我做错了什么？

Answer 1

这是因为JavaScript在元素之前加载。你有两种方式。

快速而肮脏的方式

在元素之后移动JavaScript。

<!DOCTYPE HTML>
<html lang="de">
  <head>
    <title>Testing page</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <p id="test">Not loaded</p>
    <script type="text/javascript" src="test.js"></script>
  </body>
</html>

使用事件处理程序

或者，在JavaScript中使用document＆＃39; load事件处理程序。

$(function () {
  document.getElementById("test").innerHTML = "Loaded js file";
});

由于您使用的是jQuery，因此可以通过简单的方式保留它：

$(function () {
  $("#test").html("Loaded js file");
});

注意：我更喜欢这种方法，因为只有当文档被完全加载并且它也不引人注目时才会执行此函数。

Answer 2

那是因为你必须等到窗口加载完毕。

window.onload = function() {
    document.getElementById("test").innerHTML = "Loaded js file";
};

Answer 3

DOM的元素按顺序解析脚本也是一个元素。在您的情况下，脚本已被解析，但尚未解析p
元素，因为脚本的执行会停止所有HTML解析，直到它到达文件末尾。
因此，您的脚本应该替换在文件的底部，以便查询DOM。

<!DOCTYPE HTML>
<html lang="de">
<head>
   <title>Testing page</title>
   <meta charset="utf-8">
</head>
<body>
   <p id="test">Not loaded</p>
   <script type="text/javascript" src="test.js"></script>
</body>
</html>

或将脚本放在顶部，但等待dom加载事件

document.addEventListener("DOMContentLoaded", function() {
  document.getElementById("test").innerHTML = "Loaded js file";
}, false);

Answer 4

在DOM准备就绪之前加载脚本，当您设置innerHTML时，DOM对象#test尚不存在。

解决方案 - 在功能onload中打包js内容：

window.onload = function() {
    document.getElementById("test").innerHTML = "Loaded js file";
};

无法将js导入html

4 个答案: