Cannot read property 'scrollHeight' of Undefined in JS

Cannot read property 'scrollHeight' of Undefined in JS #

The "Cannot read property 'scrollHeight' of undefined" error occurs for 2 reasons:

Accessing the scrollHeight property on an undefined value (a DOM element that doesn't exist).
Inserting the JS script tag above the HTML where the DOM elements are created.

cannot read property scrollheight of undefined

Here is an example of how the error occurs.

index.js

Copied!
const elements = [];

// ⛔️ Uncaught TypeError: Cannot read properties of undefined (reading 'scrollHeight')
const height = elements[0].scrollHeight;

To solve the "Cannot read property 'scrollHeight of undefined" error make sure you're accessing the property on an existing DOM element. The error often occurs when accessing an array index out of bounds after calling the getElementsByClassName method.

index.js

Copied!
const elements = document.getElementsByClassName('does-not-exist');
console.log(elements); // 👉️ []

// ⛔️ cannot read property 'scrollHeight' of undefined
const scrollHeight = elements[0].scrollHeight;

We provided an invalid class name to the getElementsByClassName method, so the method returned an empty array-like object.

Accessing the array at an index that doesn't exist returns an undefined value. If you then access the scrollHeight on an undefined value, the error is thrown.

To solve the "Cannot read property 'scrollHeight' of undefined" error, place the JS script tag at the bottom of the body tag. The JS script should run after the DOM elements have been created.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <!-- ⛔️ BAD - script is run before div exists ⛔️ -->
    <script src="index.js"></script>

    <div class="box">Hello</div>
  </body>
</html>

Notice that we inserted the JS script tag above the HTML code that creates the DOM elements. This means that the div element will not be accessible inside the index.js file.

index.js

Copied!
const elements = document.getElementsByClassName('box');
console.log(elements); // 👉️ []

// ⛔️ cannot read property 'scrollHeight' of undefined
const scrollHeight = elements[0].scrollHeight;

You should place the JS script tag at the bottom of the body tag, after the HTML elements it needs to access have been created.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <div class="box">Hello</div>

    <!-- ✅ GOOD - div already exists ✅ -->
    <script src="index.js"></script>
  </body>
</html>

Now we can access the div element inside of the index.js file.

index.js

Copied!
const elements = document.getElementsByClassName('box');
console.log(elements); // 👉️ [div.box]

// ✅ Works
const scrollHeight = elements[0].scrollHeight;
console.log(scrollHeight); // 👉️ 18

The scrollHeight property rounds the value to an integer. If you need a fractional value, use the getBoundingClientRect() method instead.

Conclusion #

The "Cannot read property 'scrollHeight' of undefined" error occurs when the scrollHeight property is accessed on an undefined value, e.g. array index out of bounds.

To solve the error, make sure to only access the scrollHeight property on valid HTML elements.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Cannot read property 'scrollHeight' of Undefined in JS

Cannot read property 'scrollHeight' of Undefined in JS #

Conclusion #

Borislav Hadzhiev