Question

我已经阅读过许多教程并尝试过，但他们不能工作。例如，我写了这个简单的代码：

<!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>

我的页面中有Test Message个文字。

然后我将我的JS代码放到外部文件中：＆＃39; /js/js.js＆＃39;

var paragraph = document.getElementById("testElement");

paragraph.innerHTML = "Test Message";

将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 text。我的JS不起作用。请解释我的错误。

Answer 1

你的问题是，在加载正文之前执行了javascript链接，因此你可以将脚本放在正文的末尾，如下所示：

<!DOCTYPE html>
<html>
    <head>
    </head>

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

Answer 2

检查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";
});

Answer 3

这应该可以正常工作：

＆＃13;

var paragraph = document.getElementById("testElement");
paragraph.innerHTML = "Test Message";

＆＃13;

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

＆＃13;

请确保在<script type="text/javascript" src="/js/js.js"></script>之前放置</body>。

Answer 4

试试这个

＆＃13;

var doSomething = function()
{
	var paragraph = document.getElementById("testElement");

	paragraph.innerHTML = "Test Message";
}

＆＃13;

<!DOCTYPE html>
<html>
    <head>
       <script type="text/javascript" src="js.js"></script>
    </head>
    <body onload = "doSomething();">

       <p id="testElement"> Html text</p>

    </body>
</html>

＆＃13;

尝试将两个文件保存在同一文件夹中。

利用浏览器开发者控制台，确定是否发生了任何错误。

关于＆＃39; onload＆＃39;，您可以查看此link。

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

4 个答案: