Solve - Cannot read property 'value' of Undefined in JS

avatar

Borislav Hadzhiev

Last updated: Oct 21, 2021

banner

Check out my new book

Solve - Cannot read property 'value' of Undefined #

There are 3 reasons the "Cannot read property of undefined" error occurs:

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

cannot read property value of undefined

Most commonly, the error occurs if you try to access the value property on a variable that has a value of undefined.

index.js
const obj = undefined; // ⛔️ Cannot read properties of undefined (reading 'value') obj.value;

To solve the "Cannot read property 'value' of undefined" error, use the optional chaining (?.) operator to check that the variable is not nullish before accessing it, e.g. obj?.value. If the variable is undefined or null, the operator short-circuits instead of throwing an error.

index.js
const obj = undefined; // ✅ Using optional chaining console.log(obj?.value); // 👉️ undefined console.log(obj?.value?.nested); // 👉️ undefined // ✅ Using if / else if (obj?.value) { console.log(obj.value); } else { // 👇️ this runs console.log('obj.value not found'); } // ✅ Using logical AND (&&) operator console.log(obj && obj.value); // 👉️ undefined

The optional chaining (?.) operator allows us to access a property on an object without throwing an error if the reference is undefined or null.

Instead of throwing an error, the optional chaining (?.) operator short-circuits returning undefined if the reference is equal to undefined or null.

The last example uses the logical AND (&&), which doesn't evaluate the value to the right if the value to the left is falsy (e.g. undefined).

You often get undefined values when trying to access an array element at an index that doesn't exist in the array.
index.js
const arr = []; // ⛔️ Cannot read properties of undefined (reading 'value') console.log(arr[0].value); // ❌ Bad console.log(arr[0]?.value); // ✅ Good console.log(arr[0] && arr[0].value); // ✅ Good
Make sure the variable you are accessing has been declared in your code before you try to access it, otherwise you will get the "X is not defined" error.

Another common reason for getting the error is accessing a property on DOM element that doesn't exist.

To solve the "Cannot read property 'value' of undefined" error, make sure that the DOM element you are accessing exists. The error is often thrown when trying to access the value property at non-existent index after using the getElementsByClassName or getElementsByName methods.

Here's the HTML code that defines the DOM element.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <input type="text" name="first_name" value="Initial value" /> <script src="index.js"></script> </body> </html>

And here's the JavaScript code.

index.js
// ❌ should be first_name const inputs = document.getElementsByName('does-not-exist'); console.log(inputs); // 👉️ [] // ⛔️ Cannot read properties of undefined (reading 'value') console.log(inputs[0].value);

Instead, correct the name and use the optional chaining (?.) operator to check if the element at index 0 contains the property.

index.js
const inputs = document.getElementsByName('does-not-exist'); console.log(inputs); // 👉️ [] if (inputs[0]?.value) { console.log(inputs[0].value); } else { console.log('element does not exist'); }

If the element at index 0 contains the value property, our if block will run, otherwise the else block is ran.

To solve the "Cannot read property 'value' of undefined" 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 class="first_name" type="text" name="first_name" value="Initial value" /> </body> </html>

The index.js script tag is ran before the input element is declared.

If you try to access the input element in the index.js script, it will not be available, causing the error.

index.js
const inputs = document.getElementsByName('first_name'); console.log(inputs); // 👉️ [] // ⛔️ Cannot read properties of undefined (reading 'value') const value = inputs[0].value; console.log(value);

You have to place the JS script at the bottom of the body, after the HTML elements have been declared.

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

Now the input element is accessible inside of the index.js script.

index.js
const inputs = document.getElementsByName('first_name'); console.log(inputs); // 👉️ [input.first_name] // ✅ Works const value = inputs[0].value; console.log(value); // 👉️ "Initial value"

Conclusion #

The "Cannot read property 'value' of undefined" error occurs when trying to access the value property on an undefined value.

You often get undefined values when:

  • accessing a property that does not exist on an object
  • accessing an index that is not present in an array
Use the search field on my Home Page to filter through my more than 3,000 articles.