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

avatar

Borislav Hadzhiev

Thu Oct 21 20212 min read

banner

Photo by Ana Gabriel

Solve - Cannot read property 'top' of Undefined #

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

  1. Accessing the top property on a DOM element that doesn't exist.
  2. Inserting the JS script tag above the HTML, where the DOM elements are declared.

cannot read property top of undefined

Here is an example of how the error occurs.

index.js
const el = undefined; // โ›”๏ธ Cannot read properties of undefined (reading 'top') console.log(el.top);

The error most commonly occurs if you use a non-existent identifier.

Here's the HTML for the example:

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous" ></script> </head> <body> <div id="box">Content</div> <script src="index.js"></script> </body> </html>

And the related JS code that tries to access a non-existent element.

index.js
const el = $('#does-not-exist'); console.log(el); // โ›”๏ธ Cannot read properties of undefined (reading 'top') console.log(el.offset().top);

Calling the offset() method returns an undefined value and accessing the top property triggers the error.

To resolve the "Cannot read property 'top' of undefined" error, make sure that the DOM element you're accessing the top property on exists.

You can also conditionally check to avoid getting the error.

index.js
const el = $('#does-not-exist'); // โœ… Using optional chaining const result1 = el?.offset()?.top; console.log(result1);

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

Another common reason for getting the error is placing the JS script tag before declaring the DOM elements.

To solve the "Cannot read property 'top' 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" /> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous" ></script> </head> <body> <div id="box">Content</div> <!-- โœ… GOOD - Script is ran after div is declared โœ… --> <script src="index.js"></script> </body> </html>

Notice that we placed the index.js script below the code that creates the div element.

If the JS script tag is placed above the code that creates the div element, you wouldn't be able to access the element from your index.js file.

index.js
const el = $('#box'); console.log(el); // โœ… Works console.log(el.offset().top); // ๐Ÿ‘‰๏ธ 8

When the correct identifier is provided and the JS script tag is loaded after the element is created, we are able to access the top property without getting the error.

Conclusion #

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

To solve the error, make sure to access the top property on valid DOM elements only.

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