'addEventListener' of null

Question

please help me with the following code, it shows "Uncaught TypeError: Cannot read property 'addEventListener' of null".

let btn = document.getElementById("btn");

function function1(){
  let ourRequest = new XMLHttpRequest();
  ourRequest.open('GET', 'https://learnwebcode.github.io/json-example/animals-1.json');
  ourRequest.onload = function() {
  let ourData = JSON.parse(ourRequest.responseText);
  console.log(ourData[0]);
  };
  ourRequest.send();
};
btn.addEventListener("click", function1(), false);

i simply dont see how its null.... :/

thanks in advance!

is there a button with id **btn** on your page ? – Ankit Aug 22 '17 at 09:40 — Ankit, Aug 22 '17 at 09:40

lukaleli · Accepted Answer · 2017-08-22T09:47:14.967

4

If btn is null then it means there's no element with id property equal to btn. Double check your HTML. Also please make sure that you put your script just before the end of the body tag. Your script may be loaded before the DOM is and that can also be the issue.

PS. Even if you fix the issue with missing HTML element your code won't work. You're invoking your callback instead of passing it to addEventListener. That will result in passing undefined to event listener. Change:

btn.addEventListener("click", function1(), false);

to:

btn.addEventListener("click", function1, false);

edited Aug 22 '17 at 09:47

answered Aug 22 '17 at 09:40

lukaleli

2,867
3
18
31

1

+1 for the `function1()` correction, but double-checking the HTML code is not enough. The element can very well be present, but if the code is placed before, it won't find the element. – Jeremy Thille Aug 22 '17 at 09:46
@JeremyThille good point! Updating the answer – lukaleli Aug 22 '17 at 09:48
@jimmyweb thanks it works not :D – ptaku Aug 22 '17 at 10:03
@ptaku so please mark my answer as correct :) – lukaleli Aug 22 '17 at 10:05
i was using the script tag before the DOM loaded , this answer helped – MD5 Mar 29 '21 at 06:22

'addEventListener' of null

1 Answers1