Aryan poonacha Aryan poonacha - 1 month ago 8
Javascript Question

Why am I getting "TypeError: Cannot read property 'value' of null" when using getElementById?

In the following code:

function Transact() {
if(document.getElementById('itctobuy').value!='') {
itctobuy = parseInt(document.getElementById('itctobuy').value);
}
if(document.getElementById('steamtobuy').value!='') {
steamtobuy = parseInt(document.getElementById('steamtobuy').value);
}
if(document.getElementById('reltobuy').value!='') {
reltobuy = parseInt(document.getElementById('reltobuy').value);
}
if(document.getElementById('airtobuy').value!='') {
airtobuy = parseInt(document.getElementById('airtobuy').value);
}
if(document.getElementById('bsnltobuy').value!='') {
bsnltobuy = parseInt(document.getElementById('bsnltobuy').value);
}
updateValues();
}


The function's executed by a simple
onclick
of a button. There are 5 textarea elements and the user may input a number in any, and upon clicking the button the value should be stored in these vars if the textarea value isn't empty (Although it doesn't work even if the empty condition is not present).

If I remove the entire block,
updateValues()
executes fine, whereas putting it back causes it not be executed, so the problem's with it. What's the reason for this and how do I fix this?

Edit: The console says the following:


Uncaught TypeError: Cannot read property 'value' of null at TRANSACT at HTMLButtonElement.onclick


So what's the cause of this error? It doesn't work when I input all text fields and their values are not null.

Answer

Uncaught TypeError: Cannot read property 'value' of null

That tells you that at least one of those elements doesn't exist as of when that code runs, so getElementById returns null, which you're trying to read the value property from.

getElementById will only return null if no element with the given ID exists in the document as of when you call it. In general, the reasons for the element not existing fall into these categories:

  1. Calling getElementById too early
  2. Misspelling the id (e.g., a typo)
  3. Using a name instead of an id

In your case, since this is on button click, it's probably #2 or #3. You can see which ID it's unhappy about by looking at the line the error identifies, or using your browser's debugger to step through the code statement-by-statement.

Let's look at each category:

1. Calling getElementById too early

One common error is to have code calling getElementById in a script block that's before the element in the HTML, like this:

<script>
document.getElementById("foo").innerHTML = "bar";
</script>
<!-- ...and later... -->
<div id="foo"></div>

The element doesn't exist as of when that code runs.

Solutions:

  • Move the script to the end of the HTML, just before the closing </body. tag
  • Put your call to getElementById in a callback, such as on the DOMContentLoaded event, or a button click , etc.

Don't use window.onload or <body onload="..."> unless you really want to wait to run the code until all external resources (including all images) have been loaded.

2. Misspelling the id

This is really common, using getElementById("ofo") when the element is defined with id="foo".

Solution: Use the right ID. :-)

3. Using a name instead of an id

getElementById("foo") looks for an element with id="foo", not with name="foo". name != id.

Solution: Use id, not name. :-) (Or look up the element with document.querySelector('[name="foo"]').)