As a web developer, you’re bound to encounter errors when working with JavaScript. Coding errors stop the program from doing what is expected.

To be able to fix these errors, you need to be able to understand the error message, as this will help you comprehend why the error was raised and how to fix it.

In this tutorial, we’ll talk about the “uncaught typeerror: cannot set property” error in JavaScript.

You’ll learn why this error occurs, the different reasons why you might encounter it, and the different methods of fixing it.

What Does “Uncaught Typeerror: Cannot set property” Mean in JavaScript?

A

let heading = document.getElementById('heading');  
heading.textContent = 'This is a heading';  
//Uncaught TypeError: Cannot set properties of null (setting 'textContent')

2 mainly occurs when you perform an operation involving incompatible data types. In our case, we’re dealing with the “uncaught typeerror: cannot set property” error, a JavaScript error which mainly occurs when you try to assign a property to a DOM element with a

let heading = document.getElementById('heading');  
heading.textContent = 'This is a heading';  
//Uncaught TypeError: Cannot set properties of null (setting 'textContent')

3 value.

This error can be raised for different reasons like:

• Placing the

  let heading = document.getElementById('heading'); heading.textContent = 'This is a heading'; //Uncaught TypeError: Cannot set properties of null (setting 'textContent')

  4 tag in the wrong position in your markup
• Spelling errors when referencing DOM elements
• Accessing an undefined or invalid DOM element

In the sections that follow, we’ll discuss the reasons above, how they can throw the “uncaught typeerror: cannot set property” error with code examples, and how to fix the error.

We’ll also talk about how you can determine if a variable is

let heading = document.getElementById('heading');  
heading.textContent = 'This is a heading';  
//Uncaught TypeError: Cannot set properties of null (setting 'textContent')

3 or

let heading = document.getElementById('heading');  
heading.textContent = 'This is a heading';  
//Uncaught TypeError: Cannot set properties of null (setting 'textContent')

6.

Let’s get started!

How To Fix the “uncaught typeerror: cannot set property” in JavaScript

In this section, you’ll get to know the common causes of the “uncaught typeerror: cannot set property” error in JavaScript. Each subsection that follows is dedicated to one of those causes and its solution.

You’ll also get to visualize how to fix the error with some practical code examples.

Invalid Placement of

let heading = document.getElementById('heading');  
heading.textContent = 'This is a heading';  
//Uncaught TypeError: Cannot set properties of null (setting 'textContent')

4 Tag

When a webpage loads, the JavaScript code written for the page loads as well. The way JavaScript recognizes the Document Object Model (DOM) is dependent on where you place the

let heading = document.getElementById('heading');  
heading.textContent = 'This is a heading';  
//Uncaught TypeError: Cannot set properties of null (setting 'textContent')

4 tag in your code.

If you place the

let heading = document.getElementById('heading');  
heading.textContent = 'This is a heading';  
//Uncaught TypeError: Cannot set properties of null (setting 'textContent')

4 tag within the

0 tag or above all the HTML elements within the

1 tag, then the script will be executed before the DOM is ready.

When JavaScript runs before the DOM is ready, it fails to get a full representation of the DOM — which means most of your variables linked to DOM elements will return as

let heading = document.getElementById('heading');  
heading.textContent = 'This is a heading';  
//Uncaught TypeError: Cannot set properties of null (setting 'textContent')

3.

Here’s an example of a code that would raise the “uncaught typeerror: cannot set property” error in JavaScript because of the position of the

let heading = document.getElementById('heading');  
heading.textContent = 'This is a heading';  
//Uncaught TypeError: Cannot set properties of null (setting 'textContent')

4 tag:

The code above has the

let heading = document.getElementById('heading');  
heading.textContent = 'This is a heading';  
//Uncaught TypeError: Cannot set properties of null (setting 'textContent')

4 tag placed within the

0 tag. We also have a

6 element with an

7 of

8.

Next, we’ll try to assign text to the

6 element:

let heading = document.getElementById('heading');  
heading.textContent = 'This is a heading';  
//Uncaught TypeError: Cannot set properties of null (setting 'textContent')

Although the code above looks fine, the “uncaught typeerror: cannot set property” error was raised. This happened because the script had already loaded before the DOM, so our JavaScript had no knowledge of the DOM elements.

This error will also be raised if you place the

let heading = document.getElementById('heading');  
heading.textContent = 'This is a heading';  
//Uncaught TypeError: Cannot set properties of null (setting 'textContent')

4 tag above other DOM elements:

Now the

let heading = document.getElementById('heading');  
heading.textContent = 'This is a heading';  
//Uncaught TypeError: Cannot set properties of null (setting 'textContent')

4 tag is above the DOM elements in the

1 tag, but it will still raise the “uncaught typeerror: cannot set property” error because the script loads before the DOM.

To fix this error, you have to put the

let heading = document.getElementById('heading');  
heading.textContent = 'This is a heading';  
//Uncaught TypeError: Cannot set properties of null (setting 'textContent')

4 tag just before the closing

1 tag. This way, all the DOM elements will load before the script.

Here’s an example of correct placement:

let heading = document.getElementById('heading');  
heading.textContent = 'This is a heading'

When the code above is executed, the

6 element will have its

6 set to “This is a heading”. There will be no error.

Spelling Errors

Spelling errors are another source of raising the “uncaught typeerror: cannot set property” error.

When you misspell the attribute (ID or class) used to identify a DOM element in JavaScript, you make reference to a nonexistent element, which will return a

let heading = document.getElementById('heading');  
heading.textContent = 'This is a heading';  
//Uncaught TypeError: Cannot set properties of null (setting 'textContent')

3 value.

Trying to assign a value to a

let heading = document.getElementById('heading');  
heading.textContent = 'This is a heading';  
//Uncaught TypeError: Cannot set properties of null (setting 'textContent')

3 value will raise the “uncaught typeerror: cannot set property” error.

Here’s a code example to help you understand:

let heading = document.getElementById('headin');  
heading.textContent = 'Hello World!'  
//Uncaught TypeError: Cannot set properties of null (setting 'textContent')

In the code above, we have a

6 tag with an

7 of

8.

In the JavaScript code, we made reference to the

7 but with a spelling error. Instead of “heading”, we wrote “headin” — that is,

let heading = document.getElementById('heading');  
heading.textContent = 'This is a heading'

3 instead of

let heading = document.getElementById('heading');  
heading.textContent = 'This is a heading'

4.

To avoid such errors, always make sure that your DOM elements are referenced properly, using the right attribute with matching spelling.

Accessing an Undefined DOM Element

In the last section, we saw how referencing a misspelled attribute can raise an “uncaught typeerror: cannot set property” error. The same is the case when we try to access a DOM element that doesn’t exist.

In the example below, we’ll try to access an

7 attribute that is yet to be defined in the markup:

let heading = document.getElementById('headin');  
heading.textContent = 'Hello World!'  
//Uncaught TypeError: Cannot set properties of null (setting 'textContent')

As can be seen above, we’re trying to set the

6 of a DOM element that doesn’t exist. There is no element in our HTML code that has an

7 of “heading”, so this returns a

let heading = document.getElementById('heading');  
heading.textContent = 'This is a heading';  
//Uncaught TypeError: Cannot set properties of null (setting 'textContent')

3 value.

If you go on to log the

8 variable to the console, you’ll get a value of

let heading = document.getElementById('heading');  
heading.textContent = 'This is a heading';  
//Uncaught TypeError: Cannot set properties of null (setting 'textContent')

3 returned.

How To Determine if a Variable Is ‘null’ or ‘undefined’

By this point, you’ve understood that assigning a value to a variable that is

let heading = document.getElementById('heading');  
heading.textContent = 'This is a heading';  
//Uncaught TypeError: Cannot set properties of null (setting 'textContent')

3 or

let heading = document.getElementById('heading');  
heading.textContent = 'This is a heading';  
//Uncaught TypeError: Cannot set properties of null (setting 'textContent')

6 will most likely raise an “uncaught typeerror: cannot set property” error.

But you can determine if a variable is

let heading = document.getElementById('heading');  
heading.textContent = 'This is a heading';  
//Uncaught TypeError: Cannot set properties of null (setting 'textContent')

3 or

let heading = document.getElementById('heading');  
heading.textContent = 'This is a heading';  
//Uncaught TypeError: Cannot set properties of null (setting 'textContent')

6; before interacting with them. Although this does not fix the error, it gives some clarity on why a functionality isn’t working.

Before we discuss how to determine if a variable is

let heading = document.getElementById('heading');  
heading.textContent = 'This is a heading';  
//Uncaught TypeError: Cannot set properties of null (setting 'textContent')

3 or

let heading = document.getElementById('heading');  
heading.textContent = 'This is a heading';  
//Uncaught TypeError: Cannot set properties of null (setting 'textContent')

6 in JavaScript, it’s important to understand the difference between a

let heading = document.getElementById('heading');  
heading.textContent = 'This is a heading';  
//Uncaught TypeError: Cannot set properties of null (setting 'textContent')

3 and an

let heading = document.getElementById('heading');  
heading.textContent = 'This is a heading';  
//Uncaught TypeError: Cannot set properties of null (setting 'textContent')

6 value.

A variable is

let heading = document.getElementById('heading');  
heading.textContent = 'This is a heading';  
//Uncaught TypeError: Cannot set properties of null (setting 'textContent')

3 when an empty or unknown value is assigned to the variable. The previous sections of this tutorial show practical examples of a

let heading = document.getElementById('heading');  
heading.textContent = 'This is a heading';  
//Uncaught TypeError: Cannot set properties of null (setting 'textContent')

3 variable.

On the other hand, a variable is

let heading = document.getElementById('heading');  
heading.textContent = 'This is a heading';  
//Uncaught TypeError: Cannot set properties of null (setting 'textContent')

6 when no value has been assigned to it:

let age;  
console.log(age);  
// undefined

In the code above, the

let heading = document.getElementById('headin');  
heading.textContent = 'Hello World!'  
//Uncaught TypeError: Cannot set properties of null (setting 'textContent')

2 variable was declared, but no value was assigned to it. When logged to the console,

let heading = document.getElementById('heading');  
heading.textContent = 'This is a heading';  
//Uncaught TypeError: Cannot set properties of null (setting 'textContent')

6 was returned.

Now that you know the difference between

let heading = document.getElementById('heading');  
heading.textContent = 'This is a heading';  
//Uncaught TypeError: Cannot set properties of null (setting 'textContent')

3 and

let heading = document.getElementById('heading');  
heading.textContent = 'This is a heading';  
//Uncaught TypeError: Cannot set properties of null (setting 'textContent')

6, let’s have a look at how you can determine if a variable is either of those.

You can use the loose equality operator (

let heading = document.getElementById('headin');  
heading.textContent = 'Hello World!'  
//Uncaught TypeError: Cannot set properties of null (setting 'textContent')

6. to determine if a variable is either

let heading = document.getElementById('heading');  
heading.textContent = 'This is a heading';  
//Uncaught TypeError: Cannot set properties of null (setting 'textContent')

3 or

let heading = document.getElementById('heading');  
heading.textContent = 'This is a heading';  
//Uncaught TypeError: Cannot set properties of null (setting 'textContent')

6. Here’s an example:

let heading = document.getElementById('heading');  
heading.textContent = 'This is a heading';  
//Uncaught TypeError: Cannot set properties of null (setting 'textContent')

0

let heading = document.getElementById('heading');  
heading.textContent = 'This is a heading';  
//Uncaught TypeError: Cannot set properties of null (setting 'textContent')

1

In the code above, we made a spelling error when referencing a DOM element in JavaScript.

Using an

let heading = document.getElementById('headin');  
heading.textContent = 'Hello World!'  
//Uncaught TypeError: Cannot set properties of null (setting 'textContent')

9 statement, we checked to see if the value of the

8 variable was

let heading = document.getElementById('heading');  
heading.textContent = 'This is a heading';  
//Uncaught TypeError: Cannot set properties of null (setting 'textContent')

3:

2

Since it returned a

let heading = document.getElementById('heading');  
heading.textContent = 'This is a heading';  
//Uncaught TypeError: Cannot set properties of null (setting 'textContent')

3 value, “Variable is null – cannot assign value to a null variable” would be logged out in the console. If we had not gotten a

let heading = document.getElementById('heading');  
heading.textContent = 'This is a heading';  
//Uncaught TypeError: Cannot set properties of null (setting 'textContent')

3 value, then the code in the

5 block would have been executed.

If you’re wondering why we didn’t include

let heading = document.getElementById('heading');  
heading.textContent = 'This is a heading';  
//Uncaught TypeError: Cannot set properties of null (setting 'textContent')

6 in the

let heading = document.getElementById('headin');  
heading.textContent = 'Hello World!'  
//Uncaught TypeError: Cannot set properties of null (setting 'textContent')

9 statement, this is because

8 in JavaScript, so the code in the

let heading = document.getElementById('headin');  
heading.textContent = 'Hello World!'  
//Uncaught TypeError: Cannot set properties of null (setting 'textContent')

9 statement checks for both errors.

Summary

Error messages can be confusing in some cases, but they help developers figure out why their code isn’t working in order to fix it and avoid future occurrences.

Although nobody loves errors, they’re a good way to help you understand your favorite programming language better.

What’s more, fixing a coding error gives you more context when you encounter a similar error in a different project. The error we’ve discussed in this article isn’t only raised when working on vanilla JavaScript projects — you can also encounter it when working with JavaScript frameworks and libraries.

If you’re going to build an app or website, there’s a variety of skills to learn and a lot of practice required to use these skills efficiently. Kinsta’s new Hobby Tier provides the perfect hosting platform for everyone who needs a space to practice, from burgeoning new coders to experienced developers looking to advertise their work or deploy proof-of-concept apps. And if you sign up for any tier today, you’ll get $20 off your first month.

How do you fix undefined properties Cannot be read?

The error can be fixed by creating a variable to hold the name of the file. This will fix the error and will not change anything in your application.

How do I fix uncaught TypeError in JavaScript?

To resolve this issue, ensure that the properties you're trying to access are properly initialized. You can use the optional chaining operator ( ?. ) to avoid the error when trying to access a nested property that might be undefined: console.

What is undefined property error in JavaScript?

The JavaScript warning "reference to undefined property" occurs when a script attempted to access an object property which doesn't exist.

What is uncaught type error undefined?

The root cause of the error is that the declared variable doesn't have any value, so by default, JavaScript treats all variables as undefined if you don't assign the value. When you write the code, ensure that you have an if check added before accessing.