Javascript：未捕获的TypeError：无法调用null的方法'addEventListener'

小编典典

Javascript：未捕获的TypeError：无法调用null的方法'addEventListener'

javascript

我正在尝试做一些相当简单的事情，但是由于我可能不够出色而无法搜索文档，因此无法正常工作。

我有一个运行正常的内联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的经验几乎为零，而到现在为止，我大部分时间都是通过货物培训来学习。

阅读 504

2020-05-01

共1个答案

小编典典

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

元素= document.getElementById（id）; element是对Element对象的引用； 如果文档中没有指定ID的元素，则为null。

解决方案：

将脚本放在页面底部。
在加载事件中调用附加代码。
使用jQuery库，它是DOM ready事件。

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

尽管JavaScript提供了呈现页面时执行代码的load事件，但是只有在完全接收到所有资产（例如图像）之后，才会触发此事件。在大多数情况下，可以在完全构建DOM层次结构后立即运行脚本。确保传递给.ready（）的处理程序将在DOM准备就绪后执行，因此通常这是附加所有其他事件处理程序的最佳位置…
…

2020-05-01