Javascript：Uncaught TypeError：无法调用null的方法'addEventListener' [英] Javascript: Uncaught TypeError: Cannot call method 'addEventListener' of null
问题描述
我正在尝试做一些相当简单的事情，但由于我的原因可能不足以搜索文档，我无法让它工作。
<我有一个功能强大的内联JS，看起来像这样：
< A title =Wolfram IP Calchref =的javascript：TXT =提示符（ '回车％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：无法调用null的方法'addEventListener'：
< HTML> < HEAD profile =http://www.w3.org/2005/10/profile> < script type =text / javascript>
var compute = document.getElementById（'compute'）;
compute.addEventListener（'click'，computeThatThing，false）;
函数computeThatThing（）{
txt = prompt（'输入％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 Calcid =computehref =javascript：void（O）;> Test< / A>
< / BODY>
< / HTML>
我能找到的唯一能指出类似问题的是 addEventListener 无法使用< A> 但应处理< IMG> （这对我来说很合适，因为我要把它倒在一些图片上），所以我尝试添加以下内容无效：
< img id =computesrc =http://products.wolframalpha.com/images/products/products-wa.png/>
提前感谢您指出我做错了什么。这可能是显而易见的，但我对JS的经验几近为零，而且到目前为止，我已经大部分都是货物结果。
您的代码在< head> =>运行之前运行，因此 document.getElementById（' compute'）; 返回null，作为MDN承诺...
element = document.getElementById（id） ;
元素是对Element对象的引用，如果具有指定ID的元素不在文档中，则为null。
解决方案：
- 将脚本放在底部页面。
- 在load事件中调用附加代码。
- 使用jQuery库及其DOM就绪事件。
什么是jQuery ready 事件以及为什么需要它？
（为什么不只是JavaScript的加载事件）：
虽然JavaScript提供了在呈现页面时执行代码的加载事件，但在完全接收到所有资产（如图像）之前，不会触发此事件。在大多数情况下，只要完全构造DOM层次结构，就可以运行脚本。传递给.ready（）的处理程序保证在DOM准备好后执行，所以这通常是附加所有其他事件处理程序的最佳位置...
...
ready docs
I'm trying to do something fairly simple, but for the reason of me probably not being good enough to search documentation, I can't get this to work.
I have a functioning inline JS that looks like this:
<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>
For various reasons, I'm trying to seperate the JS, and this is where I hit a snag.
I've created the following test page that gives me the error 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>
The only thing I've been able to find that points to a problem like that is that addEventListener can't work with <A> but should handle <IMG> (which suits me fine as I'm going to pour this on some images), so I tried adding the following to no avail:
<img id="compute" src="http://products.wolframalpha.com/images/products/products-wa.png" />
Thanks in advance for pointing out what I'm doing wrong. It is probably glaringly obvious, but I have close to zero experience with JS and I have gone mostly by cargo culting when I've needed it until now.
Your code is in the <head> => runs before the elements are rendered, so document.getElementById('compute'); returns null, as MDN promise...
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.
Solutions:
- Put the scripts in the bottom of the page.
- Call the attach code in the load event.
- Use jQuery library and it's DOM ready event.
What is the jQuery ready event and why is it needed?
(why no just JavaScript's load event):
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 docs
这篇关于Javascript：Uncaught TypeError：无法调用null的方法'addEventListener'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
