TypeError: Cannot read property ‘top’ of undefined in JavaScript – How To Fix It?

Posted on by Tom Joseph
TypeError: Cannot read property ‘top’ of Undefined in JS

TypeError: Cannot read property ‘top’ of Undefined in JSis an error not only beginners but also experienced programmers encounter in some cases of working with javascript. I will guide you how to fix this error in the simplest and fastest way.

Why does the error “TypeError: Cannot read property ‘top’ of undefined” in JS happen?

There are two main reasons for TypeError: cannot read property ‘top’ of undefined in JS. Access the top property on a non-existent DOM element and Insert a JS script tag above the HTML where the DOM elements are declared.

The error message occurs as follows:

Uncaught TypeError: Cannot
read properties of undefined (reading 'top')

In the coding process, if you violate the two rules I mentioned above, you will get an error message like the above. We can see this error when access to the browser in which you are running your project. Right-click and select Inspect, then select the Console tab. In this Console tab, we can observe the error message above.

Solutions to fix this error

Now I will give specific examples of situations you may encounter and how to avoid them.

Solution 1: Check the location of the script.js file

You must make sure that your script.js file is available before executing the command. This file must be placed above the closing body tag in the HTML file. But, when the browser finishes browsing the content of the HTML, the script.js file will be approved. This is true of the way the DOM model works.

It will do the following:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="script.js"></script>
</body>
</html>

Now keep running your command. I’m pretty sure it works. If not, try adding the below.

Solution 2: Check whether the value in use exists or not

Initially, I will create files index.html and main.js. Then I link both these files together. In the index.html file, I create a div tag, and I name the id “dom” in this div tag. Please look at the illustrative code below to make it easier to understand.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script
      src="https://code.jquery.com/jquery-3.6.0.min.js"
    ></script>
    <title>Title</title>
</head>
<body>
    <div id="dom">This is DOM</div>
</body>
<script src="main.js"></script>
</html>

At file main.js I execute the following code and get the error right away:

const element = $('#javascript');
console.log(element.offset().top);

console.log("If there is no error, this command will be executed.");

Output:

main.js:123 Uncaught TypeError: Cannot read properties of undefined (reading 'top')
    at main.js:123:29

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

To resolve this error, make sure that the DOM element you are accessing in the top attribute exists.

Note: your main.js file needs to be placed under the code that generates the div tag to ensure you can access the element from the index.html file .

Below is the code that when we access the correct id attribute of the div tag that we created in the above example without error:

const element = $('#dom');
console.log(element.offset().top);

console.log("If there is no error, this command will be executed.");

Output:

If there is no error, this command will be executed.

Now when calling offset() the method will not get an error.

Summary

Above are the situation where you can get the error TypeError: Cannot read property ‘top’ of Undefined in JS and how to solve them. I hope this article will help you to solve this error when you encounter it.

Maybe you are interested:

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *