我正在学习 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 片段以便在外部文件中工作并解释原因吗?
这取决于您运行脚本的时间。
如果您在文件的
<head>
部分加载脚本,则页面的 DOM 尚未加载,因此 getElementById
将失败。
加载外部脚本作为
<body>
部分的最后一件事将解决这个问题。
如果代码在内部运行良好但在外部运行良好,则问题可能出在 JS 文件的链接上。检查 JS 文件的链接并确保其链接正确。如果你像这样链接了 javascript 文件
<script src="javascriptFile.js">
</script>
并且代码仍然无法正确运行,那么问题可能出在其他地方。还要确保您正在正文中加载脚本,并确保文件路径正确。
您会惊讶地发现,诸如拼写错误之类的小错误经常会导致此类问题。
请在此函数中添加您的所有 JS 代码。
document.addEventListener("DOMContentLoaded", function (){
//在其中添加你的JS代码
})