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

I've read many tutorials and tried them, but they don't work. Just for example I wrote this simple code:

我已经阅读了许多教程并尝试了它们,但它们不起作用。例如,我写了这个简单的代码:

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

I get Test Message text in my page.

我在页面中收到了测试消息文本。

Then I put my JS code to an external file: '/js/js.js'

然后我将我的JS代码放到外部文件中:'/ js / js.js'

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

paragraph.innerHTML = "Test Message";

And modify the HTML file to:

并将HTML文件修改为:

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

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

</body>
</html>

When I open the HTML file in a browser, I only get Html text. My JS does not work. Please explain what I am doing wrong.

当我在浏览器中打开HTML文件时,我只获得Html文本。我的JS不起作用。请解释我做错了什么。

4 个解决方案

#1

Your problem is that javascript linked in head is executed before the body is loaded, so you can just put the script at the end of the body like this:

你的问题是,在加载正文之前执行链接的javascript,所以你可以把脚本放在正文的末尾,如下所示:

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

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

#2

Check the JavaScript error console.

检查JavaScript错误控制台。

Your code runs before the document is rendered so the node testElemet doesn't exist. Either move your script-include down as the last element in the body or wrap your code in a load/ready event.

您的代码在呈现文档之前运行,因此节点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";
});

#3

This should work fine:

这应该工作正常:

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

<!DOCTYPE html>
<html>

<head>
</head>

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

</html>

Please make sure that <script type="text/javascript" src="/js/js.js"></script> is placed just before </body>.

请确保

#4

Try this

var doSomething = function()
{
	var paragraph = document.getElementById("testElement");

	paragraph.innerHTML = "Test Message";
}

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

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

    </body>
</html>

Try saving both the files in the same folder.

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

Make use of your browsers developer console, to determine whether any errors have occurred.

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

Regarding 'onload', you can have a look at this link.

关于'onload',您可以查看此链接。

#1