Question

Javascript：未捕获的类型错误：无法调用 null 的方法“addEventListener”

2012-03-24

126090

javascript addeventlistener

我想做一些相当简单的事情，但由于我可能不够好，无法搜索文档，我无法让它工作。

我有一个功能齐全的内联 JS，如下所示：

<A title="Wolfram IP Calc" href="javascript:txt=prompt('Enter%20IP%20address,%20e.g.%2010.20.30.40/29','1.2.3.4/5');%20if(txt)%20window.open('http://www.wolframalpha.com/input/?i='+txt);void(O);">Compute!</A>

由于各种原因，我试图分离 JS，这就是我遇到障碍的地方。

我创建了以下测试页面，它给出了错误 Uncaught TypeError: Cannot call method 'addEventListener' of null :

<HTML> <HEAD profile="http://www.w3.org/2005/10/profile"> <script type="text/javascript">
var compute = document.getElementById('compute');
compute.addEventListener('click', computeThatThing, false);

function computeThatThing() {
    txt=prompt('Enter%20IP%20address,%20e.g.%2010.20.30.40/29','1.2.3.4/5');
    if(txt) {
        window.open('http://www.wolframalpha.com/input/?i='+txt);
    }
}
</script></HEAD>
<BODY>
<A title="Wolfram IP Calc" id="compute" href="javascript:void(O);">Test</A>
</BODY>
</HTML>

我唯一能找到的指向此类问题的是 addEventListener 不能与 <A> 一起使用，但应该处理 <IMG> （这很适合我，因为我要将它倒在一些图像），所以我尝试添加以下内容，但无济于事：

<img id="compute" src="http://products.wolframalpha.com/images/products/products-wa.png" />

提前感谢您指出我做错的事情。这可能很明显，但我对 JS 几乎没有经验，到目前为止，当我需要它时，我大多是通过货物崇拜来做的。

Answer 1

您的代码位于 <head> =>在元素呈现之前运行，因此 document.getElementById('compute'); 返回 null，正如 MDN 承诺的那样...

element = document.getElementById(id);
element is a reference to an Element object, or null if an element with the specified ID is not in the document.

MDN

解决方案：

将脚本放在页面底部。
在 load 事件中调用附加代码。
使用 jQuery 库及其 DOM ready 事件。

什么是 jQuery ready 事件，为什么需要它？
（为什么不只是 JavaScript 的 load 事件）：

While JavaScript provides the load event for executing code when a page is rendered, this event does not get triggered until all assets such as images have been completely received. In most cases, the script can be run as soon as the DOM hierarchy has been fully constructed. The handler passed to .ready() is guaranteed to be executed after the DOM is ready, so this is usually the best place to attach all other event handlers...
...

ready 文档

Answer 2

将脚本标记移至 BODY 末尾而不是 HEAD 末尾，因为在当前代码中，计算脚本时 html 元素不存在于文档中。

由于您不想使用 jquery。使用 window.onload 或 document.onload 执行当前脚本标记中的整个代码片段。 window.onload vs document.onload