Question

使用 .getElementById 抓取元素时为空

2014-02-21

160

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，我就是这样做的。

有人知道为什么我一直得到 null 吗？它是否试图在加载之前抓取元素？

Answer 1

在将按钮添加到 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，您可以将脚本标记放回头部