Solve - Cannot read property 'value' of Null in JS

avatar

Borislav Hadzhiev

Thu Oct 21 20212 min read

banner

Photo by Autri Taheri

Solve - Cannot read property 'value' of Null #

There are 2 main reasons the "Cannot read property 'value' of null" error occurs:

  1. Accessing the value property on a null value (DOM element that doesn't exist).
  2. Inserting the JS script tag above the HTML, where the DOM elements are declared.

cannot read property value of null

Here is an example of how the error occurs.

index.js
const el = null; // โ›”๏ธ Cannot read properties of null (reading 'value') console.log(el.value);

The error most commonly occurs if you use the getElementById() method and pass it an id that is not present in the DOM.

index.js
const input = document.getElementById('does-not-exist'); console.log(input); // ๐Ÿ‘‰๏ธ null // โ›”๏ธ Cannot read properties null (reading 'value') const value = input.value;

To resolve the "Cannot read property 'value' of null" error, make sure that the DOM element you're accessing the value property on exists.

In the example, an element with the provided id does not exist in the DOM, so the getElementById method returns null. When we try to access the value property on a null value we get the error.

You can use the optional chaining (?.) operator, a ternary operator or a simple if statement to avoid the error.

index.js
const input = document.getElementById('does-not-exist'); // โœ… Using optional chaining ?. const value1 = input?.value || ''; // โœ… Using ternary operator const value2 = input ? input.value : ''; // โœ… using if/else if (input) { const value3 = input.value; } else { console.log('input is falsy'); }

Another common reason for getting the error is placing the JS script tag before declaring the DOM elements.

To solve the "Cannot read property 'value' of null" error, make sure that the JS script tag is placed at the bottom of the body, after the HTML elements have been declared.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <!-- โ›”๏ธ BAD - Script is ran before input is created โ›”๏ธ --> <script src="index.js"></script> <input id="first_name" type="text" name="first_name" value="Initial Value" /> </body> </html>

Because we placed the JS script tag above the code that creates the input element, the index.js file is ran before the DOM element is created.

This means that the input will not be accessible in the index.js file.

index.js
const input = document.getElementById('first_name'); console.log(input); // ๐Ÿ‘‰๏ธ null // โ›”๏ธ Cannot read properties null (reading 'value') const value = input.value;

You have to move the JS script tag to the bottom of the body, after the HTML elements.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <input id="first_name" type="text" name="first_name" value="Initial Value" /> <!-- โœ… GOOD - Script is ran after input is declared โœ… --> <script src="index.js"></script> </body> </html>

Now the input element is available in the index.js file.

index.js
const input = document.getElementById('first_name'); console.log(input); // ๐Ÿ‘‰๏ธ input#first_name // โœ… Works const value = input.value; console.log(value); // ๐Ÿ‘‰๏ธ "Initial value"

Now that the HTML element is created before the index.js script is ran, we are able to access the input element.

Conclusion #

The "Cannot read property 'value' of null" error occurs when:

  • trying to access the value property on a null value, e.g. after calling getElementById with an invalid identifier
  • inserting the JS script tag before the DOM elements have been declared

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee