Friday, May 17, 2024
24
rated 0 times [  31] [ 7]  / answers: 1 / hits: 125998  / 12 Years ago, sat, march 24, 2012, 12:00:00

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.


More From » addeventlistener

 Answers
1

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.




MDN



Solutions:




  1. Put the scripts in the bottom of the page.

  2. Call the attach code in the load event.

  3. 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


[#86620] Friday, March 23, 2012, 12 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
tayla

Total Points: 681
Total Questions: 102
Total Answers: 108

Location: Marshall Islands
Member since Tue, Sep 21, 2021
3 Years ago
tayla questions
Fri, Mar 5, 21, 00:00, 3 Years ago
Wed, Oct 28, 20, 00:00, 4 Years ago
Thu, Apr 9, 20, 00:00, 4 Years ago
;