Question

根据我的阅读，javascript的首选格式位于标题末尾的单独文件中。我写了一个简单的屏幕，在一个时间间隔内增加indx，如果按下Previous按钮则反转。如果我将脚本包含在正文的末尾，它可以正常工作，但如果我在标题的末尾包含按钮则无效。我在这里错过了什么吗？有人可以解释一下吗？

var buttons = document.getElementsByTagName("button");
for (var i = 0; i < buttons.length; i++) {
buttons[i].onclick = handleButtonPress;
}

var del = 5000;  /* time delay in milli seconds */
var indx = 0;
var direct = 1;
var intervalID = window.setInterval(proceed, del);

function proceed() {
	indx += direct;
	if (indx <= 0){
	indx = 0;
	direct = direct * -1;
	};
	msg = 'indx = ' + indx + ' direct = ' + direct;
	document.getElementById("msg").innerHTML = msg;
}

function test() {
	alert('this is a test')
}

function handleButtonPress(e) {
if (e.target.id == "next") {
direct = 1;
}
else if (e.target.id == "prev") {
direct = -1
}
}

function displayMsg(msg) {
document.getElementById("msg").innerHTML = msg;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example Timeout + Buttons</title>

<!-- <script src="test.js"></script> Does not work here!! -->

</head>
<body>
<p id='msg'></p>
<p>
At start<br>
<button id="next">Next</button>
<button id="prev">Previous</button>
</p>

<!-- Script works here!! -->
<script src="test.js"></script>

</body>
</html>

Answer 1

这不是问题，而是在DOM元素存在之前尝试使用或引用它们的结果：

在HTML底部加载js时：
- DOM已加载
- 你可以随意操纵它。
将js加载到HEAD中时：
- DOM 已加载
- 只有在正文已加载后才必须让页面执行javascript：
- 使用jQuery的$()
- 使用BODY DOM元素的onload事件。

Answer 2

在底部包含脚本。这是正确的方法。

当您的脚本操作DOM时，DOM必须在它工作之前呈现。

另一个积极的副作用是您的页面将在浏览器中加载并在加载所有脚本之前显示内容。使用大型库时，这非常好！

Answer 3

可以将js src放在那里，唯一的问题是javascript将在之后加载。为了确保我们只能在完全加载后使用Javascript，您可以在Javascript中添加它：

document.addEventListener("DOMContentLoaded", function(event) { 
    //do work
});

或在body标签中，您可以添加此答案中的脚本：javascript - $(document).ready equivalent without jQuery - Stack Overflow

Javascript在正文中工作，但在标题中不起作用

3 个答案: