TypeError: Cannot read property 'X' of NULL in JavaScript

# TypeError: Cannot read properties of Null (reading 'X')

There are 3 main reasons the "Cannot read properties of null (reading 'X')" 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.

cannot read property of null

The error occurs if you try to access a property on a variable that stores a null value, e.g. a DOM element that doesn't exist.

Here is an example.

index.js

Copied!
const example = null;

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

cannot read properties of null

We attempted to access a property on a null value which caused the error.

And here is another example.

index.js

Copied!
const el = null;

// ⛔️ Uncaught TypeError: Cannot read properties of null
// (reading 'click')
el.click();

The code for this article is available on GitHub

# Accessing a property on a `null` value

One way to solve the 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;

console.log(example?.value); // 👉️ undefined
console.log(example?.value?.moreNested); // 👉️ undefined

accessing property on null value

The optional chaining (?.) operator short-circuits and returns undefined if the value to the left is nullish (null or undefined).

You can also use the logical AND (&&) operator in a similar way.

index.js

Copied!
const example = null;

// 👇️ null
console.log(example && example.value && example.value.nested);

The code for this article is available on GitHub

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.

# Make sure the DOM element exists before accessing a property

When working with DOM elements, the "Cannot read properties of null (reading 'X')" error occurs for 2 main reasons:

Accessing a property on a DOM element that doesn't exist.
Placing the JS script tag above the code that creates the DOM elements in your index.html file.

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

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

We specified an id that doesn't exist and got a null value from the getElementById() method.

Trying to access a property on a null value causes the error.

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

index.js

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


// ✅ Checking if the element exists before accessing property
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 we short-circuit returning undefined and our else block runs.

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

Another common cause of the error is placing your JS script tag above the code that creates the DOM elements in your index.html file.

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>

The index.js script is placed above the input element, so it doesn't have access to it.

index.js

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

// ⛔️ TypeError: 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>

The code for this article is available on GitHub

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"

The code for this article is available on GitHub

HTML code is parsed from top to bottom, so the script tag has to be placed at the bottom of the body tag, after all of the DOM elements it needs to access.

# Conclusion

To solve the "Cannot read properties of null (reading 'X')", make sure:

You aren't trying to access a property on a variable that stores a null value.
You aren't trying to access a property on a DOM element that doesn't exist.
You haven't placed the JS script tag above the HTML that declares the DOM elements in your index.html file.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

TypeError: Cannot read property 'X' of NULL in JavaScript

# TypeError: Cannot read properties of Null (reading 'X')

# Accessing a property on a null value

# Make sure the DOM element exists before accessing a property

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

# Conclusion

Borislav Hadzhiev

# Accessing a property on a `null` value