I am getting an "Uncaught TypeError: Cannot read property 'addEventListener' of null" on java script

Question

I am getting the error mention in the title of this question for the following java script:

var button = document.getElementById('button');
button.addEventListener('click', buttonAction);

function buttonAction(){
    var box = document.getElementById('Box');
    box.value = "show this";
}

The button and text box reefer to in the script are declared as so in the linked html document:

<button id="button">button</button> <br> 
<label>Input Box:</label> 
<input type="text" name="" placeholder="enter text" id="box"> <br>

As always, grateful for any help offered.

Possible duplicate of [Why does jQuery or a DOM method such as getElementById not find the element?](https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) — Andreas, Apr 14 '18 at 14:19
change the document.getElementById('Box'); to document.getElementById('box'); — Jay Lane, Apr 14 '18 at 14:19

31piy · Answer 1 · 2018-04-16T04:43:32.320

0

As @Xufox highlighted, the original error you mentioned in the post may occur due to including your script before the HTML in the page. Ensure that your script runs after the HTML to mitigate that error.

But besides it, there is one more problem with your code is that the statement document.getElementById('Box') returns null.

JavaScript is a case-sensitive language. The ID of the input box is box whereas you've provided Box (mind the capital B). Correcting this error, your code works fine. See the demo below:

var button = document.getElementById('button');
button.addEventListener('click', buttonAction);

function buttonAction() {
  var box = document.getElementById('box');
  box.value = "show this";
}

<button id="button">button</button> <br>
<label>Input Box:</label>
<input type="text" name="" placeholder="enter text" id="box"> <br>

edited Apr 16 '18 at 04:43

answered Apr 14 '18 at 14:19

31piy

21,164
6
40
57

2

That’s not the problem the error message is describing, though. `button` is also `null` if the script runs before the HTML is in the DOM. – Sebastian Simon Apr 14 '18 at 14:23
@Xufox -- that's true. But the post overall looks confusing. I tried posting a possible solution considering script in the correct place. – 31piy Apr 14 '18 at 14:24
You should rephrase your answer. You cannot ignore the thrown error (_"Attaching the event listener works fine"_) and than later add an one-liner with: "Oh and the error you mention is caused by...". Yes the id in the click handler is wrong (which would be a close-vote because of a typo) but that's not the source of the error in the question... – Andreas Apr 14 '18 at 14:33

score 0 · Answer 2 · answered Apr 14 '18 at 15:43

With some help from the answers provided, I have resolved the problem. First, as mentioned, since the name of the id is all lower case, it should be called as such in the script. So I changed

var box = document.getElementById('Box');

to

var box = document.getElementById('box');

The change being the call of the id from 'Box' to 'box'.

But this did not fix the problem; I was still getting the error. I have now learned that this was happening because I had the statement linking my java script to the html document at the html head of my html document, instead of at the end of the html body. Having the statement at the html head causes the java script to load before the html document got to know the "button" object (before it got to it). So when I call a button in my java script, the program ( I think this is what they call the DOM), is responding: "what button? I don't know any button." So, to avoid this, I loaded my statement linking my html document to my java script at the close of the html body. Now, when I call objects from my html document in my java script, the program knows what I am talking about, and it runs just fine.

Marius98 · Answer 3 · 2018-04-14T15:18:53.337

-2

var button = document.getElementById('button');
button.addEventListener('click', buttonAction);

function buttonAction(){
    var box = document.getElementById('box');
    box.value = "show this";
}

<button id="button">button</button> <br> 
<label>Input Box:</label> 
<input type="text" name="" placeholder="enter text" id="box"> <br>

You have a writing error, your element's id is "box" not "Box", and you get an error because javascript is case sensitive, for javascript element with id "Box" does not exist.

var box = document.getElementById('box');

edited Apr 14 '18 at 15:18

answered Apr 14 '18 at 14:23

Marius98

154
1
12

I have made the correction mentioned (Box to box), and even though running code sample above demonstrates that this should fix the issue, I am still getting the same error. Do you suppose that other portions of my html document, which are nor referred to in my script, could be causing the error? – jay Apr 14 '18 at 14:53
I added this comment here cause, for some reason, it would not let me post my comment where the code sample is. – jay Apr 14 '18 at 14:54
works fine to me, as you said maybe is another part of your code that cause this problem, can you show me the hole code? – Marius98 Apr 14 '18 at 15:13

I am getting an "Uncaught TypeError: Cannot read property 'addEventListener' of null" on java script

3 Answers3