Solve - Cannot set property 'value' of Null in JavaScript

avatar

Borislav Hadzhiev

Last updated: Jul 25, 2022

banner

Check out my new book

Solve - Cannot set property 'value' of Null #

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

  1. Setting the value property on a variable that stores a null value.
  2. Setting the value property on a DOM element that doesn't exist.
  3. Inserting the JS script tag above the HTML, where the DOM elements are declared.

cannot set property value of null

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

index.js
const input = null; // ⛔️ Cannot set properties of null (setting 'value') input.value = 'new value';

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

index.js
const fromDb = null; // ✅ Provide empty object fallback const obj = fromDb || {}; obj.value = 'new value'; console.log(obj); // 👉️ {value: 'new 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 'value' 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 input = document.getElementById('does-not-exist'); console.log(input); // 👉️ null // ⛔️ Cannot set properties of null (setting 'value') input.value = 'New value';
We passed a non-existent id to the getElementById method and got anull value back. Trying to set the value 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 input = document.getElementById('does-not-exist'); console.log(input); // 👉️ null if (input) { input.value = 'New value'; } else { console.log('input does not exist'); }

To solve the "Cannot set property 'value' 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 input exists ⛔️ --> <script src="index.js"></script> <input id="first_name" name="first_name" type="text" /> </body> </html>

The JS script tag is placed above the code that declares the input element. The index.js script is ran before the input element is created, therefore we can't access the input element in the index.js file.

index.js
const input = document.getElementById('first_name'); console.log(input); // 👉️ null // ⛔️ Cannot set properties of null (setting 'value') input.value = 'New value';

The JS script tag should be placed at the bottom of the body tag, after all of the DOM elements it needs access to.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <input id="first_name" name="first_name" type="text" /> <!-- ✅ GOOD - input already exists ✅ --> <script src="index.js"></script> </body> </html>

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

index.js
const input = document.getElementById('first_name'); console.log(input); // 👉️ input#first_name // ✅ Works input.value = 'New value';

Conclusion #

The "Cannot set property 'value' 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 doesn't exist in the DOM.

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