0

我最近开始学习 JS，我有一个我想不通的问题......我尝试了很多解决方案，但没有任何帮助。

我有一个非常基本的 JS 代码：

<body>

<h1>My First JS Page</h1>

<p id="demo">My First Paragraph.</p>

<script>
document.getElementById("demo").innerHTML="My First JavaScript";
</script>

</body>

该代码在脚本位于下方时有效，但如果我将相同的脚本附加为外部脚本，并将其连接到 HEADER 中的 HTML，则该脚本无法正常工作....

4

4 回答 4

1

标题中的 HTML

如果您将脚本放在 中，<head>那么它将出现在<p id="demo">.

由于脚本立即尝试 to getElementById('demo')，因此该元素不存在。所以它undefined代替了元素。

您需要将脚本移动到元素之后（因为它在问题中的代码中），或者将代码包装在一个函数中并将该函数用作事件处理程序（对于直到元素才会触发的事件存在，例如加载事件）。

于 2012-08-31T10:18:38.603 回答
1

<body>发生这种情况是因为尚未加载文档或 HTML 页面的一部分。

为了克服这个问题，向onLoadevent注册一个事件处理程序<body>，如下所示：

<html>
<head>
<script type="text/javascript">

function onDocumentReady() {
   document.getElementById("demo").innerHTML="My First JavaScript";
}

window.onload = onDocumentReady;

</script>
</head>
<body>
<h1>My First JS Page</h1>

<p id="demo">My First Paragraph.</p>
</body>
</html>
于 2012-08-31T10:18:56.123 回答
1

这是关于操作顺序的。您拥有的脚本将在浏览器解析后立即运行，这意味着如果没有呈现的 id 为“demo”的元素，则不会发生任何事情。只需将<script>块放在<p>元素上方，您就会注意到这种行为（JSFiddle 示例）。为了解决这个问题，您需要确保所有脚本都位于文档的末尾（错误格式），或者您使用某种方法使脚本在文档完全加载后运行（首选）。两种最常见的方法是使用window.onload事件：

window.onload = document.getElementById("demo").innerHTML="My First JavaScript";

或者合并一个 JS 库，例如 jQuery，并为此使用它的内置方法：

$(document).ready(function() { 
    $("#demo").html("My First JavaScript");
}
于 2012-08-31T10:19:11.377 回答
1

您应该将外部脚本包装在

window.onload

例子

HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>My first JS</title>
<script src="test.js"></script>
</head>

<body>
<h1>My First JS Page</h1>
<p id="demo">My First Paragraph.</p>
</body>
</html>

JS 文件名 test.js

window.onload = function () {
    document.getElementById("demo").innerHTML="My First JavaScript";
    //more code can go here if you want
}
于 2012-08-31T10:27:50.083 回答