使用.getElementById抓取元素时为空

时间:2014-02-21 21:09:37

标签: javascript html

我正在尝试抓取一个元素(一个按钮)并在其上添加一个事件监听器。 每当我跑

var button = document.getElementById('clickMe');
console.log(button); // null

我检查了我的javascript文件正在加载并检查所有内容都区分大小写。这是我的html和JS文件:

HTML:

<!doctype html>
<html>
  <head>
    <script src="js/timer.js"></script>
  </head>
  <body>
        <button id='clickMe' type='button'>Hello</button>
  </body>
</html>

JS

var button = document.getElementById('clickMe');
console.log(button);
function buttonClicked () {
  alert('the button was clicked');
}

button.addEventListener('click', buttonClicked);

function timerComplete () {
  alert('timer complete');
}

setTimeout(timerComplete, 2000);

我发现的最常见的错误是我做过的骆驼套管getelementbyid。

有谁知道为什么我一直变空?它是否试图在加载元素之前抓取它?

1 个答案:

答案 0 :(得分:2)

在将Button添加到DOM之前执行您的Javascript代码。您可以将HTML更改为:

<!doctype html>
<html>
  <body>
        <button id='clickMe' type='button'>Hello</button>
        <script src="js/timer.js"></script>
  </body>
</html>

或者甚至更好,如果你不介意让你的JS代码更复杂,你可以等待你的dom元素在执行代码部分之前加载:

document.addEventListener('DOMContentLoaded', function() {
   var button = document.getElementById('clickMe');
   console.log(button);
});

如果您使用此JS,则可以将脚本标记放回头部