Cannot read property 'style' of Undefined in JavaScript

avatar

Borislav Hadzhiev

Last updated: Jul 25, 2022

banner

Photo from Unsplash

Cannot read property 'style' of Undefined in JavaScript #

There are 2 main reasons the "Cannot read property 'style' of undefined" error occurs:

  1. Accessing the style property on a DOM element that doesn't exist, e.g. array index out of bounds.
  2. Inserting the JS script tag above the HTML, where the DOM elements are declared.

cannot read property style of undefined

Here is an example of how the error occurs.

index.js
const arr = []; // ⛔️ Uncaught TypeError: Cannot read properties of undefined (reading 'style') console.log(arr[0].style)

The error most commonly occurs when using the getElementsByClassName method with a class name that is not present in the DOM.

index.js
const boxes = document.getElementsByClassName('does-not-exist'); console.log(boxes); // 👉️ [] // ⛔️ Cannot read properties of undefined (reading 'style') boxes[0].style.color = 'red';

To solve the "Cannot read property 'style' of undefined" error, make sure that the value on which you're accessing the style property is a DOM element.

In the code snippet, we passed a class name that doesn't exist to the getElementsByClassName method.

The method returned an empty array, so trying to access the array element at index 0 returns undefined. Accessing the style property on an undefined value causes the error.

The other common reason the error occurs is placing the JS script tag above the code that declares the DOM elements.

To solve the "Cannot read property 'style' of undefined" error, make sure that the JS script tag is placed 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> <!-- ⛔️ BAD - Script is run before DOM elements are declared ⛔️ --> <script src="index.js"></script> <div class="box" style="color: violet">Hello World</div> </body> </html>
We placed the JS script tag above the code that declares the div element, so the index.js file is run before the div is created.

This means that the div element will not be accessible in the index.js file.

index.js
const boxes = document.getElementsByClassName('box'); console.log(boxes); // 👉️ [] // ⛔️ Cannot read properties of undefined (reading 'style') boxes[0].style.color = 'red';

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

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <div class="box" style="color: violet">Hello World</div> <!-- ✅️ GOOD - HTML elements are already available ✅ --> <script src="index.js"></script> </body> </html>

Now you can access the div element in the index.js file.

index.js
const boxes = document.getElementsByClassName('box'); console.log(boxes); // 👉️ [div.box] // ✅ works boxes[0].style.color = 'red';

We placed the JS script tag at the bottom of the page, so we are able to access the HTML elements.

Conclusion #

The "Cannot read property 'style' of undefined" error occurs when:

  • Accessing the style property on a DOM element that doesn't exist, e.g. array index out of bounds
  • Placing the JS script tag before the DOM elements have been declared
I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.