为什么这可以作为内部脚本工作,但当您使用外部 javascript 文件时却不能工作

问题描述 投票:0回答:3

我正在学习 Javascript,需要这个问题的答案。 为什么这段 javascript 不能使用内部脚本标签在 HTML DOM 中工作?

这是我的 html 文档。带有内部 JavaScript 扩展:

<div id="targetarea">
    <p>Hello World</p>
</div>
<div id="target-area">
    <p id="tagline">Hello World!</p>
</div>
<script>
//Creating a a new element
// store the target area to a variable to keep things neat
var targetArea = document.getElementById("target-area");
// create our <p> element
var p = document.createElement("p");
// create a text node inside the <p>, note that we're 
//  using a variable "p" here
var snippet = document.createTextNode("this was a generated paragraph");
// insert our generated paragraph into the DOM
p.appendChild(snippet);
targetArea.appendChild(p);
</script>

这在内部工作正常,但当使用外部 js 文件时却不行。有人可以给我正确的 js 片段以便在外部文件中工作并解释原因吗?

javascript html
3个回答
1
投票

这取决于您运行脚本的时间。

如果您在文件的

<head>
部分加载脚本,则页面的 DOM 尚未加载,因此
getElementById
将失败。

加载外部脚本作为

<body>
部分的最后一件事将解决这个问题。


0
投票

如果代码在内部运行良好但在外部运行良好,则问题可能出在 JS 文件的链接上。检查 JS 文件的链接并确保其链接正确。如果你像这样链接了 javascript 文件

<script src="javascriptFile.js">
</script>

并且代码仍然无法正确运行,那么问题可能出在其他地方。还要确保您正在正文中加载脚本,并确保文件路径正确。

您会惊讶地发现,诸如拼写错误之类的小错误经常会导致此类问题。


0
投票

请在此函数中添加您的所有 JS 代码。

document.addEventListener("DOMContentLoaded", function (){

//在其中添加你的JS代码

})

© www.soinside.com 2019 - 2024. All rights reserved.