11

我编写了一个非常简单的事件监听器，但它出现了错误：Uncaught TypeError: Cannot call method 'addEventListener' of null这表明它可能与 id 有关（它也适用于document?

<html>
<head>
    <script type="text/javascript">
        function message () {
        alert("Hello!");
        }
        var button = document.getElementById('button');
        button.addEventListener('click', message, true);
    </script>
</head>
<body>
    <input type="button" id="button" value="Click me!" />
</body>
</html>

（我知道在这之后我会感到很愚蠢，但我是一个 JS 菜鸟）

4

2 回答 2

17

在您的脚本执行时，尚未创建 DOM。您可以将脚本放在正文标记之后，以便在阅读 html 后运行它 - 但更好的方法是侦听DOMContentLoaded.

document.addEventListener('DOMContentLoaded', init, false);
function init(){
  function message () {
    alert("Hello!");
  }
  var button = document.getElementById('button');
  button.addEventListener('click', message, true);
};

window.onload = init也可以。我不喜欢它，因为在我看来，一个脚本可以将 window.onload 覆盖为它自己的 init 函数。（我还没有确认发生与否）

于 2013-07-18T07:28:33.573 回答
1

因为这个脚本是在 body 还没有加载的时候执行的。使用 onload 事件，并在其中粘贴您的代码。

于 2013-07-18T07:27:47.710 回答