Question

我是javascript代码的新手。关于在html外部插入javascript的问题。我看到，当我在html中使用form标签时，我必须在form标签之后编写脚本代码，如果我在head tage或form tag之前编写脚本代码，那么代码javascript将无效。请查看下面的详细信息。

我有textbox_message.js

var text = "i am just a box only";
var textid = document.getElementById("text_id");
var linkid = document.getElementById("link_id");

linkid.onmouseover = function(){
     textid.value=text;
}

linkid.onmouseout = function(){
    textid.value = " ";
}

和textbox_message.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

</head>

<body>

<a href="pr4_1.html" id="link_id"> thi is link </a>
<form>
<input type="text" id="text_id" />
</form>
<script src="textbox_message.js" type="text/javascript"></script>
</body>
</html>

这段代码工作正常但我的问题是：如果我按照以下方式编写脚本标记

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="textbox_message.js" type="text/javascript"></script>

</head>

<body>

<a href="pr4_1.html" id="link_id"> thi is link </a>
<form>
<input type="text" id="text_id" />
</form>
</body>
</html>

或者编写脚本标签befor表格标签

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

</head>

<body>
<script src="textbox_message.js" type="text/javascript"></script>

<a href="pr4_1.html" id="link_id"> thi is link </a>
<form>
<input type="text" id="text_id" />
</form>
</body>
</html>

Javascript无效？为什么呢？

Answer 1

您发布的代码会立即执行，因此在后面的情况下它不会“看到”您引用的元素。要解决此问题，请使用：

document.addEventListener('DOMContentLoaded', function() {
    // your code here
});

这将触发代码执行，然后页面的DOM就绪，所以您引用的所有元素也可以使用。

Answer 2

这是因为在javascript元素加载之前会先加载Input text，因此找不到元素。在javascript标记之后加载</body> DOM加载并运行正常

时也一样

为什么JavaScript代码不起作用？

2 个答案: