Question

我正在尝试做一些相当简单的事情，但由于我的原因可能不足以搜索文档，我无法让它工作。

我的内联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> =＆gt;在元素呈现之前运行，因此document.getElementById('compute');返回null，作为MDN承诺......

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

MDN

<强>解决方案：

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

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

虽然JavaScript在呈现页面时提供了用于执行代码的加载事件，但在完全接收到所有资产（如图像）之前，不会触发此事件。在大多数情况下，只要完全构造DOM层次结构，就可以运行脚本。传递给.ready（）的处理程序保证在DOM准备好后执行，因此这通常是附加所有其他事件处理程序的最佳位置...
...

ready docs

Answer 2

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

因为您不想使用jquery。使用window.onload或document.onload执行您当前脚本标记中的全部代码。 window.onload vs document.onload

Javascript：Uncaught TypeError：无法调用null的方法'addEventListener'

2 个答案: