1

我正在尝试学习 JavaScript 的基础知识，但我不知道为什么这不起作用……它是如此基础？

<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
    ul{
        list-style-type:none;
    }
    div{
        width:300px;
        height:200px;
        background-color:#0066cc;
    }
</style>

<script language="text/javascript"> 
    var testing = document.getElementById("addBtn");
    testing.addEventListener("click", function(e){ alert("test") } , false);
</script>

</head>
<body>
<ul id="placeholder"></ul>
<a href="#" id="addBtn">Add</a>
</body>
</html>
4

3 回答 3

7

当addBtn您尝试访问它时，它不会被加载。您应该在 DOM 加载后执行该操作，或者通过将该代码移动到文件的底部，或者通过onload事件：

window.onload = function() {
    var testing = document.getElementById("addBtn");
    testing.addEventListener("click", function(e){ alert("test") } , false);
}
于 2012-10-16T18:27:09.750 回答
2

当代码：

var testing = document.getElementById("addBtn");

运行时，该addBtn元素尚未被解析。您可以做的一件事是将<script>标签向下移动到页面底部。

您可以做的另一件事是在 onload 事件中运行代码。就像是：

<script language="text/javascript">
   window.onload = function () {
      var testing = document.getElementById("addBtn");
       testing.addEventListener("click", function(e){ alert("test") } , false);
   };
</script>
于 2012-10-16T18:27:47.750 回答
0

除了使用window.onload（这是您问题的关键答案）之外，请考虑使用<script>or <script type="text/javascript">，因为“语言”属性已被弃用。更多信息在这里。

于 2012-10-16T18:43:03.483 回答