How to Fix Cannot Read Properties of Null in JavaScript

By /

JavaScript can work with missing values, but problems can happen when your code tries to use a value that is null.

You may see an error like this:

TypeError: Cannot read properties of null

You may also see something more specific, such as:

Cannot read properties of null (reading 'name')

At first, this error may look confusing. But the meaning is simple: your code is trying to read something from a value that is currently null.

This error is usually easy to fix once you find where the null value comes from.

What Does “Cannot Read Properties of Null” mean?

Let’s start with an simple example:

let user = null;

console.log(user.name);

Here, user has a value, but that value is null.

When JavaScript sees:

user.name

it tries to find name inside user.

But there is no object there. The value is null.

So JavaScript stops and shwos:

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

Think of null like an empty box. The box is there, but there is nothing inside it.

If your code asks JavaScript to get something from that empty box, you can get this error.

Why Does This Error Happen?

There are several common reasons why a value becomes null.

Sometimes you set it to null yourself. In other cases, a browser method, API, or function gives you null because it cannot find what you asked for.

Let’s look at the most common cases.

The Variable is null

This is the simplest example:

let person = null;

console.log(person.name);

The variable exists, but its value is null.

If the variable should contain an object, give it the object you need:

let person = {
  name: "John"
};

console.log(person.name);

Now JavaScript has an object to read from.

An element was not found

This is one of the most common causes when working with HTML and JavaScript.

For example:

const button = document.getElementById("submitBtn");

console.log(button.textContent);

If there is no element with the ID submitBtn, getElementById() return null.

Then JavaScript tries to rad textContent from null.

That causes the error.

Make sure the HTML element actaully exists:

<button id="submitBtn">Submit</button>

Also check that the ID in your JavaScript matches the ID in your HTML.

How to Fix “Cannot Read Properties of Null”

Now let’s look at the common ways to fix the error.

Check If the value exists before using it

Before reading a property, you can check whether the value is available or not.

For example:

const button = document.getElementById("submitBtn");

if (button) {
  console.log(button.textContent);
}

If the element exists, the code runs.

If it does not exist, JavaScript simply skips the code inside the if statement.

This is useful when an element may not always be present on the page.

Use Optional Chaining

You can also use optional chaining with ?..

For example:

const button = document.getElementById("submitBtn");

console.log(button?.textContent);

If button is null, JavaScript returns undefined instead of throwing an error.

You can also use it with objects:

const user = null;

console.log(user?.name);

The result is:

undefined

There is no crash.

Optional chaining is useful when a value is allowed to be missing.

Use a Default Value

Sometimes you want to show something when the value is null.

You can use the ?? operator:

const user = null;

const name = user?.name ?? "Guest";

console.log(name);

The result is:

Guest

This tells JavaScript to use “Guest” when the name is null or undefined.

This can be useful when showing information on a webpage.

Check querySelector()

The same problem can happen with querySelector().

For example:

const title = document.querySelector(".page-title");

console.log(title.textContent);

If there is no element with the .page-title class, querySelector() returns null.

You can check it first:

if (title) {
  console.log(title.textContent);
}

Or use optional chaining:

console.log(title?.textContent);

Also make sure the selector is correct:

<h1 class="page-title">Welcome</h1>

A small spelling mistake in the class or ID can cause the element not to be found.

Check the Result of a Function

A function may also return null.

For example:

function getUser() {
  return null;
}

const user = getUser();

console.log(user.name);

The function runs correctly, but it returns null.

So user.name causes the error.

You can check the result before using it:

const user = getUser();

if (user) {
  console.log(user.name);
}

Or use optional chaining:

console.log(user?.name);

If the function should return a user, you should also check why it is returning null.

Check API Data

API data can also contain null.

For example, your code may expect:

{
  user: {
    name: "John"
  }
}

But the API may return:

{
  user: null
}

Then this code will fail:

console.log(data.user.name);

Because data.user is null.

You can safely access the value:

console.log(data.user?.name);

It is also a good idea to check the actual API response:

console.log(data);

This helps you see whether the API returned the data your code expected.

Check Data Before Using It

Sometimes the value is null because the data has not been set yet.

For example:

let user = null;

// Later, user data is loaded
user = {
  name: "John"
};

If your code tries to use user.name before the user data is added, you can get the error.

Make sure your code uses the value after it has been loaded or created.

For example:

if (user) {
  console.log(user.name);
}

This is especially important when working with data from APIs, forms, or other parts of your application.

Check for Small Spelling Mistakes

Sometimes the problem is simply that JavaScript cannot find the element or property you expected.

For example:

const title = document.querySelector(".page-title");

console.log(title.textContent);

But your HTML might have:

<h1 class="page-titel">Welcome</h1>

The class names are different:

page-title
page-titel

Because of that spelling mistake, querySelector() cannot find the element and returns null.

Check your IDs, class names, property names, and variable names carefully.

How to Find the Exact Cause

If you are still getting the error, look at the exact line shown in the browser console.

For example:

TypeError: Cannot read properties of null (reading 'textContent')
    at app.js:12:20

Here, app.js:12:20 tells you where the problem happened.

Suppose the line is:

console.log(title.textContent);

Check the value first:

console.log(title);

If the console shows:

null

you know that title is the problem.

Now check where title came from:

const title = document.querySelector(".page-title");

If it is null, check whether the element exists and whether the selector is correct.

Use console.log() to Find the Null Value

console.log() can make this error much easier to understand.

For example:

const button = document.getElementById("submitBtn");

console.log("button:", button);

If the console shows:

button: null

you know that JavaScript did not find the button.

You can then check your HTML:

<button id="submitBtn">Submit</button>

and make sure the ID matches your JavaScript.

Check When Your JavaScript Runs

Sometimes the element exists in your HTML, but your JavaScript runs before the browser has created that element.

For example:

<script>
  const title = document.querySelector(".page-title");

  console.log(title.textContent);
</script>

<h1 class="page-title">Welcome</h1>

At the time the script runs, the <h1> may not exist yet.

One simple solution is to put the script after the HTML element:

<h1 class="page-title">Welcome</h1>

<script>
  const title = document.querySelector(".page-title");

  console.log(title.textContent);
</script>

You can also use DOMContentLoaded when your code needs to wait until the page has loaded:

document.addEventListener("DOMContentLoaded", () => {
  const title = document.querySelector(".page-title");

  console.log(title?.textContent);
});

Frequently Asked Questions

What does “Cannot Read Properties of Null” mean?

It means JavaScript is trying to read a property from a value that is null.

For example:

const user = null;

console.log(user.name);

JavaScript cannot read name because user does not contain an object.

How do I fix “Cannot Read Properties of Null”?

Find the line causing the error and check which value is null.

Then find out why it is null. It may be caused by a missing HTML element, wrong selector, API data, or a function returning null.

Why does querySelector() return null?

querySelector() returns null when it cannot find an element that matches the selector.

Check your selector and make sure the element actually exists in the HTML.

Why does getElementById() return null?

Usually, this happens because the ID does not exist or the ID in JavaScript does not match the ID in your HTML.

For example:

document.getElementById("submitBtn");

needs an element like:

<button id="submitBtn">Submit</button>

Final Thoughts

The “Cannot Read Properties of Null” error usually means one simple thing: your code tried to get something from a value that was null.

Start with the exact line shown in the error. Check the value before the property and find out why it became null.

In many cases, the fix is simple. You may need to correct an ID or selector, check whether an element exists, wait for the page to load, check API data, or safely access the value with ?..

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top