Javascript 将外部JS文件包含到HTML中的问题_Javascript_Html

Javascript 将外部JS文件包含到HTML中的问题

javascript html

Javascript 将外部JS文件包含到HTML中的问题,javascript,html,Javascript,Html,我读过很多教程，也试过，但都不管用。例如，我编写了以下简单代码： <!DOCTYPE html> <html> <head> </head> <body> <p id="testElement"> Html text</p> <script> var paragraph = document.getElementById("testElement"); par

我读过很多教程，也试过，但都不管用。例如，我编写了以下简单代码：

<!DOCTYPE html>
<html>
  <head>

  </head>
<body>
    <p id="testElement"> Html text</p>

<script>
     var paragraph = document.getElementById("testElement");
     paragraph.innerHTML = "Test Message";
</script>

</body>
</html>

并将HTML文件修改为：

<!DOCTYPE html>
<html>
  <head>
        <script type="text/javascript" src="/js/js.js"></script>
  </head>
<body>

    <p id="testElement"> Html text</p>

</body>
</html>


Html文本

当我在浏览器中打开HTML文件时，我只得到

HTML文本

。我的JS不工作。请解释我做错了什么。

检查JavaScript错误控制台

代码在呈现文档之前运行，因此节点

testElemet

不存在。将脚本向下移动，将其作为正文中的最后一个元素包含，或者将代码包装到load/ready事件中

function on_document_ready(callback) {
    if (document.readyState === "complete") {
        callback();
    } else {
        document.addEventListener("DOMContentLoaded", callback);
    }
}

on_document_ready(function () {
    var paragraph = document.getElementById("testElemet");

    paragraph.innerHTML = "Test Message";
});

检查JavaScript错误控制台

代码在呈现文档之前运行，因此节点

testElemet

不存在。将脚本向下移动，将其作为正文中的最后一个元素包含，或者将代码包装到load/ready事件中

function on_document_ready(callback) {
    if (document.readyState === "complete") {
        callback();
    } else {
        document.addEventListener("DOMContentLoaded", callback);
    }
}

on_document_ready(function () {
    var paragraph = document.getElementById("testElemet");

    paragraph.innerHTML = "Test Message";
});

这应该很好：

var段落=document.getElementById（“testElement”）；
paragration.innerHTML=“测试消息”

Html文本
这应该可以正常工作：

var段落=document.getElementById（“testElement”）；
paragration.innerHTML=“测试消息”

Html文本
您的问题是，头中链接的javascript在加载主体之前执行，因此您可以将脚本放在主体的末尾，如下所示：
<!DOCTYPE html>
<html>
    <head>
    </head>

    <body>
        <p id="testElement"> Html text</p>
        <script type="text/javascript" src="js/js.js"></script>
    </body>
</html>


Html文本
您的问题是，头中链接的javascript在加载主体之前执行，因此您可以将脚本放在主体的末尾，如下所示：
<!DOCTYPE html>
<html>
    <head>
    </head>

    <body>
        <p id="testElement"> Html text</p>
        <script type="text/javascript" src="js/js.js"></script>
    </body>
</html>


Html文本
试试这个

var doSomething=函数（）
{
var段落=document.getElementById（“testElement”）；
paragration.innerHTML=“测试消息”；
}

Html文本
试试这个

var doSomething=函数（）
{
var段落=document.getElementById（“testElement”）；
paragration.innerHTML=“测试消息”；
}

Html文本
尝试将
标记放在
前面这里的问题是当执行JS文件时，
不在DOM中。我将我的标记放在之后和之前-不起作用尝试将
标记放在
前面这里的问题是执行JS文件时，
不在DOM中。我把我的放在之后和之前-不起作用-尝试一下-得到相同的结果。@pj infest我尝试过，它起作用了。也许你的js.js文件有错误的位置。@pj-infest只需像这样删除斜杠：src=“js.js”
。然后它就可以工作了。@pj-infest查看Chrome或Firefox中的控制台，你应该会在那里找到错误。让我们试试吧。得到同样的结果。@pj-infest我试过了，它可以工作。也许你的js.js文件有错误的位置。@pj-infest只需像这样删除斜杠：src=“js.js”
。然后它就可以工作了。@pj-infest查看Chrome或Firefox中的控制台，你应该会发现错误。让我们来看看。