Question

有人能告诉我为什么当我使用以下代码时，点击“点击此处”不会引起警报？有没有办法在不为div标签添加onClick属性的情况下执行此操作？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<script type="text/javascript">

 var clicker = document.getElementById("test");
 clicker.onclick = test;

 function test() {
  alert('Test');
 }

</script>
</head>
<body>
<div id="test">Click Here</div>
</body>
</html>

Answer 1

因为当您尝试选择它时该元素不存在。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head></head>
<body>
    <div id="test">Click Here</div>

    <!-- moved the script to the end of the body element -->
    <script type="text/javascript">

       var clicker = document.getElementById("test");
       clicker.onclick = test;

       function test() {
           alert('Test');
       }
    </script>

</body>
</html>

Answer 2

看起来JavaScript在DOM加载之前正在运行。试试这个：

window.onload = function(){
    var clicker = document.getElementById("test");
    clicker.onclick = test;
}

Answer 3

此JavaScript代码在文档加载之前执行。这可以通过添加“onclick”作为html标记的属性（而不是动态注册它），或者在函数集中将其注册为body标记的“onload”属性来修复。另外，在一个单独的注释中，为什么要使用那种令人难以置信的古老doctype而不是HTML5 doctype＆lt;！DOCTYPE html＆gt;？

Answer 4

调用JS时，尚未创建元素'test'。我建议你使用jQuery并将你的代码放在document.Ready（）方法中。

Answer 5

坚持这里建议的答案，虽然他们正确地指出了错误，但在某些方面它们是不正确的。

首先，你不应该在body标签中使用Script标签。它应该总是在头脑中。你可以将head标签移动到文件的末尾。

其次作为网络程序员，您应该始终将您的疑虑分开。这里只是一个介绍：http://www.livestoryboard.com/Benefits/CMS-separation-of-concerns.html

现在考虑到您的程序，关注的是标记，css和脚本，您应该将所有脚本放在单独的js文件中，并在脚本标记中调用document onload事件并调用所需的函数。

希望这一切都有意义

为什么这个JS代码不起作用？

5 个答案: