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 typeerror 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 null value.

This error can be raised for different reasons like:

  • Placing the script 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 null or undefined.

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 script 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 script tag in your code.

If you place the script tag within the head tag or above all the HTML elements within the body 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 null.

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 script tag:

<!DOCTYPE html>
<html>
  <head>
    <title>Uncaught Typeerror Error Tutorial</title>
    <script src="app.js"></script>
  </head>
  <body>
    <h1 id="heading"></h1>
  </body>
</html>

The code above has the script tag placed within the head tag. We also have a h1 element with an id of heading.

Next, we’ll try to assign text to the h1 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 script tag above other DOM elements:

<!DOCTYPE html>
<html>
  <head>
    <title>Uncaught Typeerror Error Tutorial</title>
  </head>
  <body>
    <script src="app.js"></script>
    <h1 id="heading"></h1>
  </body>
</html>

Now the script tag is above the DOM elements in the body 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 script tag just before the closing body tag. This way, all the DOM elements will load before the script.

Here’s an example of correct placement:

<!DOCTYPE html>
<html>
  <head>
    <title>Uncaught Typeerror Error Tutorial</title>
  </head>
  <body>
    <h1 id="heading"></h1>
    <script src="app.js"></script>
  </body>
</html>
let heading = document.getElementById('heading');
heading.textContent = 'This is a heading'

When the code above is executed, the h1 element will have its textContent 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 null value.

Trying to assign a value to a null value will raise the “uncaught typeerror: cannot set property” error.

Here’s a code example to help you understand:

<!DOCTYPE html>
<html>
  <head>
    <title>Uncaught Typeerror Error Tutorial</title>
  </head>
  <body>
    <h1 id="heading"></h1>
    <script src="app.js"></script>
  </body>
</html>
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 h1 tag with an id of heading.

In the JavaScript code, we made reference to the id but with a spelling error. Instead of “heading”, we wrote “headin” — that is, document.getElementById('headin'); instead of document.getElementById('heading');.

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 id attribute that is yet to be defined in the markup:

<!DOCTYPE html>
<html>
  <head>
    <title>Uncaught Typeerror Error Tutorial</title>
  </head>
  <body>
    <h1></h1>
    <script src="app.js"></script>
  </body>
</html>
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 textContent of a DOM element that doesn’t exist. There is no element in our HTML code that has an id of “heading”, so this returns a null value.

If you go on to log the heading variable to the console, you’ll get a value of null 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 null or undefined will most likely raise an “uncaught typeerror: cannot set property” error.

But you can determine if a variable is null or undefined; 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 null or undefined in JavaScript, it’s important to understand the difference between a null and an undefined value.

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

On the other hand, a variable is undefined when no value has been assigned to it:

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

In the code above, the age variable was declared, but no value was assigned to it. When logged to the console, undefined was returned.

Now that you know the difference between null and undefined, let’s have a look at how you can determine if a variable is either of those.

You can use the loose equality operator (==) to determine if a variable is either null or undefined. Here’s an example:

<!DOCTYPE html>
<html>
  <head>
    <title>Uncaught Typeerror Error Tutorial</title>
  </head>
  <body>
    <h1 id="headin"></h1>
    <script src="app.js"></script>
  </body>
</html>
let heading = document.getElementById('headin');
if (heading == null) {
console.log('Variable is null - cannot assign value to a null variable');
} else {
heading.textContent = 'Hello World!';
}

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

Using an if statement, we checked to see if the value of the heading variable was null: if (heading == null) {...}

Since it returned a null value, “Variable is null – cannot assign value to a null variable” would be logged out in the console. If we had not gotten a null value, then the code in the else block would have been executed.

If you’re wondering why we didn’t include undefined in the if statement, this is because null == undefined in JavaScript, so the code in the if 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.