Solve - Cannot read property of Null Error in JavaScript

Solve - Cannot read property of NULL Error #

There are 3 main reasons the "Cannot read property of null" error occurs:

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

The error occurs if you try to access a property on a variable that stores a null value.

index.js

Copied!
const example = null;

// ⛔️ Cannot read properties of null (reading 'value')
example.value;

To solve the "Cannot read property of null" error, use the optional chaining (?.) operator, e.g. obj?.address?.street. If the reference is nullish, the optional chaining operator will short-circuit instead of throwing an error.

index.js

Copied!
const example = null;

// ✅ Using optional chaining
console.log(example?.value); // 👉️ undefined
console.log(example?.value?.moreNested); // 👉️ undefined

// ✅ Using logical AND (&&) operator
console.log(example && example.value); // 👉️ null

// ✅ Using if / else
if (example?.value) {
  console.log(example.value);
} else {
  // 👇️ this runs
  console.log('example.value not found');
}

The first example shows how to use the optional chaining (?.) operator.

The operator allows us to access a property of an object without having to check if the reference is valid.

Instead of throwing an error, the optional chaining (?.) operator short-circuits returning undefined if the reference is equal to null or undefined.

The second example uses the logical AND (&&) operator.

If the value to the left of the operator is falsy (e.g. null), it doesn't evaluate the expression to the right, which prevents an error from being thrown.

The third example shows an if statement that uses the optional chaining (?.) operator. Use this approach if you need to handle what happens if the property is null or undefined.

To solve the "Cannot read property of null" error, make sure that the DOM element you are accessing exists. The error is often thrown when trying to access a property after using the getElementById() method and passing it a non-existent id.

index.js

Copied!
const el = document.getElementById('does-not-exist');
console.log(el); // null

// ⛔️ Cannot read properties of null (reading 'value')
console.log(el.value);

Make sure you're accessing the correct DOM element and add a conditional check to be certain the element is found, before accessing its properties.

index.js

Copied!
const el = document.getElementById('not-exist');
console.log(el); // null

// ⛔️ Cannot read properties of null (reading 'value')

if (el?.value) {
  console.log(el.value);
} else {
  // 👇️ this runs
  console.log('element does not exist');
}

If the el variable stores a value of null or undefined, we don't get an error, instead it short-circuits returning undefined and our else block runs.

To solve the "Cannot read property of null" error, make sure to insert the JS script tag at the bottom of the body. The JS script tag should be placed after the HTML elements have been declared.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <script src="index.js"></script>

    <!-- ⛔️ BAD - SHOULD BE ABOVE SCRIPT TAG ⛔️ -->
    <input id="first_name" value="John" />
  </body>
</html>

If you now try to get the input element in the index.js script, you will get an error, because the script runs before the input element has been declared.

index.js

Copied!
const el = document.getElementById('first_name');
console.log(el); // 👉️ null

// ⛔️ Cannot read properties of null (reading 'value')
console.log(el.value);

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

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <!-- ✅️ GOOD - HTML elements above JS script ✅️ -->
    <input id="first_name" value="John" />

    <script src="index.js"></script>
  </body>
</html>

Now you can access the input element in your index.js script.

index.js

Copied!
const el = document.getElementById('first_name');
console.log(el);

// ✅ works
console.log(el.value); // 👉️ "John"

Conclusion #

The "Cannot read property of null" error occurs when trying to access a property on a null value.

Variables that store a value of null are often returned from methods such as getElementById(), when the element does not exist in the DOM.

Solve - Cannot read property of Null Error in JavaScript