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

avatar

Borislav Hadzhiev

Sat Oct 23 20212 min read

banner

Photo by Chelsea Bock

Solve - Cannot read property 'style' of Undefined #

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.
index.js
const arr = []; // โ›”๏ธ Cannot read properties of undefined (reading 'style') console.log(arr[0].style)

The error most commonly occurs when using the getElementsByClassName method and providing 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, and accessing the style property causes the error.

The other common reason the error occurs is placing the JS script tag before declaring 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 ran before DOM elements are declared โ›”๏ธ --> <script src="index.js"></script> <div class="box" style="color: violet">Hello World</div> </body> </html>

Placing the JS script tag before declaring the HTML elements causes the index.js file to be executed before the HTML elements are present in the DOM.

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';

Because we placed the JS script tag at the bottom of the page, 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

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee