Solve - Cannot set property of Null in JavaScript

avatar

Borislav Hadzhiev

Tue Oct 19 20212 min read

banner

Photo by Diana

Solve - Cannot set property of Null #

The "Cannot set property of null" error occurs for 3 reasons:

  1. Setting a property on a variable storing a null value.
  2. Setting a property on an element that isn't present in the DOM.
  3. Inserting the JS script tag above the HTML, where the DOM elements are declared.

cannot set property of null

The error occurs if you set a property on a variable that stores a null value.

index.js
const obj = null; // ⛔️ Cannot set properties of null (setting 'src') obj.src = 'value'; const arr = null; // ⛔️ Cannot set properties of null (setting '0') arr[0] = 'value';

To solve the "Cannot set property of null" error, provide a fallback value when initializing the variable.

index.js
const fromDb = null; const obj = fromDb || {}; obj['src'] = 'value'; // 👉️ {src: 'value'} const arr = fromDb || []; arr[0] = 'value'; // 👉️ ['value']

The logical OR (||) operator returns the value to the right if the value to the left is falsy (e.g. null).

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

index.js
const el = document.getElementById('does-not-exist'); console.log(el); // 👉️ null // ⛔️ Cannot set properties of null (setting 'innerHTML') el.innerHTML = 'Hello world';
We provided an id that isn't present in the DOM to the getElementById method and got anull value back. Trying to set 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 is found, before setting a property on it.

index.js
const el = document.getElementById('does-not-exist'); console.log(el); // 👉️ null if (el) { el.innerHTML = 'Hello world'; } else { console.log('element not found'); }

To solve the "Cannot set 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
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <!-- ⛔️ BAD - Script is ran before div exists ⛔️ --> <script src="index.js"></script> <div id="box">Content</div> </body> </html>

Notice that the JS script is placed above the div element. The index.js file is ran before the div element is created, therefore we can't access the div from the index.js file.

index.js
const el = document.getElementById('box'); console.log(el); // 👉️ null // ⛔️ Cannot set properties of null (setting 'innerHTML') el.innerHTML = 'Hello world';

Instead, place the JS script tag at the bottom of the body tag, after all of the DOM elements it tries to access.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <div id="box">Content</div> <!-- ✅ GOOD - div already exists ✅ --> <script src="index.js"></script> </body> </html>

Now, we are able to access the div element inside of the index.js file.

index.js
const el = document.getElementById('box'); console.log(el); // 👉️ div#box // ✅ Works el.innerHTML = 'Hello world';

Conclusion #

The "Cannot set property of null" error occurs when trying to set 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.

Use the search field on my Home Page to filter through my more than 1,000 articles.