TypeError: Cannot read properties of null (reading 'value')

avatar
Borislav Hadzhiev

Last updated: Mar 3, 2024
3 min

banner

# TypeError: Cannot read properties of null (reading 'value')

There are 2 main reasons the "Cannot read properties of null (reading 'value')" 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; // โ›”๏ธ TypeError: Cannot read properties of null (reading 'value') console.log(el.value);

cannot read property value of null

# Make sure the DOM element exists before accessing 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 solve the error, make sure you aren't accessing the value property on a null value, e.g. a non-existent DOM element.

An element with the provided id doesn't exist in the DOM, so the getElementById() method returns null.

When we try to access the value property on a null value, the error occurs.

# Checking if the element exists before accessing its value property

You can use the optional chaining (?.) operator, the 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'); }
The code for this article is available on GitHub

The optional chaining (?.) operator short-circuits instead of throwing an error if the reference is nullish.

If you want to read more on how to check if a DOM element exists, click on the following article.

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

# Place the JS script tag at the bottom of the body tag

Make sure that the JS script tag is placed at the bottom of the body, after the DOM elements have been declared.

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

Note that HTML code is parsed from top to bottom.

We placed the JS script tag above the code that creates the input element, so the index.js file is run 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 run after input is declared โœ… --> <script src="index.js"></script> </body> </html>

script placed below input element

The code for this article is available on GitHub

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"

input value is available in index js

The code for this article is available on GitHub

HTML code is parsed from top to bottom, so the JS script tag has to come after the code that declares the DOM elements.

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

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.

Copyright ยฉ 2024 Borislav Hadzhiev