Question

我正在尝试学习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>

Answer 1

尝试访问addBtn时未加载onload。您应该在加载DOM后执行该操作，方法是将该代码移动到文件的底部，或者通过window.onload = function() { var testing = document.getElementById("addBtn"); testing.addEventListener("click", function(e){ alert("test") } , false); }事件：

{{1}}

Answer 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>

Answer 3

除了使用window.onload（这是您问题的关键答案）之外，请考虑使用<script>或<script type="text/javascript">，因为不推荐使用“语言”属性。 More info here

基本的JavaScript EventListener不起作用？

3 个答案: