在 HTML 中使用外部 JavaScript [基本的东西]

use external javascript in html [basic stuff]

本文关键字：JavaScript HTML 外部      更新时间：2023-09-26

我是javascript的新手，我写了一个简单的代码来更改h1标签中的一些单词。以下是我的 HTML 和 JavaScript 文件：

var element;
var words = ["Cute","Nice","Playful"];
var current = 0;
function increment () {
	current++;
	if (current === words.length) {
		current = 0;
	}
	setTimeout('changeWord()', 1000);
}
function changeWord () {
	element.innerHTML = words[current];
	setTimeout('increment()', 2000);
}
<!DOCTYPE html>
<html>
<head>
	<title>test</title>
	<script type="text/javascript" href="script.js"></script>
</head>
<body>
<h1>This dog is <span id="atribute"></span></h1>
<script type="text/javascript" href="script.js">
	element = document.getElementById("atribute");
	changeWord();
</script>
</body>
</html>

问题是这个东西不起作用。如果我将JS移动到HTML文档中的脚本标签中，它确实有效。那么，如何使用该外部JS文档呢？

指定脚本文件时，必须使用"src"作为源属性。除了在 html 下面的第二个脚本中，您无需指定源，因为它被视为内部脚本。因此，请删除其源属性。您的新代码将是：

.HTML： 

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <script type="text/javascript" src="script.js"></script>
</head>
<body>
<h1>This dog is <span id="atribute"></span></h1>
<script type="text/javascript">
    element = document.getElementById("atribute");
    changeWord();
</script>
</body>
</html>

JavaScript： 

var element;
var words = ["Cute","Nice","Playful"];
var current = 0;
function increment () {
    current++;
    if (current === words.length) {
        current = 0;
    }
    setTimeout('changeWord()', 1000);
}
function changeWord () {
    element.innerHTML = words[current];
    setTimeout('increment()', 2000);
}// JavaScript Document
相关文章：