扩展JS代码

Extenal JS code

本文关键字：代码 JS 扩展      更新时间：2023-09-26

我最近开始学习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，则脚本就是不工作。。。。

您应该将外部脚本包装在中

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
}

HEADER 中的HTML

如果将脚本放在<head>中，则它将出现在<p id="demo">之前。

由于脚本立即尝试getElementById('demo')，因此该元素不存在。所以它得到undefined而不是元素。

您需要将脚本移动到元素之后（就像问题中的代码中一样），或者将代码封装在函数中并将该函数用作事件处理程序（用于在元素存在之前不会触发的事件，例如加载事件）。

这是关于操作顺序的。浏览器解析后，您所拥有的脚本将立即运行，这意味着如果没有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");
}

这是因为HTML页面的文档或<body>部分尚未加载。

为了解决这个问题，请向<body>的onLoad事件注册一个事件处理程序，如下所示：

<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>
相关文章：