In this article, we’ll explain what offsetTop is and what causes the TypeError: Cannot read property ‘offsetTop’ of Null in JS, then show you how to fix it. Let’s go into detail now.
What causes the TypeError: Cannot read property ‘offsetTop’ of Null in JS?
The offsetTop property is used to get the top position of an element relative to its parent. The value returned by offsetTop is a number, just like any other number in JavaScript.The offsetTop property is just one of many properties that we can use to determine the position of an element. Some of them are offsetLeft, offsetWidth, and offsetHeight.
The error occurs when we call the offsetTop attribute on an element that does not exist.
Other causes include calling offsetTop on an invisible element or running JavaScript code before the page has finished loading. Look at the two examples below to understand the causes of this error.
<head> <!-- Placing script tag in the wrong place --> <script src="script1.js"></script> <title>LearnShareIT</title> </head> <body> <main id="app"> <h1 id="heading-primary">Hi, this is LearnShareIT</h1> </main> <script src="script2.js"></script> </body>
// The script tag containing script1.js is in the wrong place -> Error
const h1 = document.querySelector("#heading-primary");
console.log(h1.offsetTop);Error:
TypeError: Cannot read property 'offsetTop' of null// The p tag containing id='paragraph' does not exist -> Error
const p = document.querySelector("#paragraph");
console.log(p.offsetTop);Error:
TypeError: Cannot read property 'offsetTop' of nullHow to fix this problem?
Use if statement
One way to fix the error is to check if the element exists before accessing it. This can be done with an if statement:
// The script tag containing script1.js is in the wrong place
const h1 = document.querySelector("#heading-primary");
// Use the if statement to check if the h1 exists
if (h1) {
// Do something with h1 element
console.log(h1.offsetTop);
} else {
// h1 element does not exist
console.log("h1 element does not exist. Please check again!");
}Output:
h1 element does not exist. Please check again!Put the script tag in the right place
Because the error is caused by the JavaScript code being executed before the web page is loaded. So we must ensure that the web page is loaded before the js files by placing them right before the closing body tag /body>. Like this:
<body> <main id="app"> <h1 id="heading-primary">Hi, this is LearnShareIT</h1> </main> <!-- Place script tags right before the closing body tag --> <script src="script1.js"></script> <script src="index1.js"></script> <script src="script2.js"></script> </body>
Or, if you want to put script tags in the head tag, you can use the defer attribute. Like this:
<head> <!-- Use the defer attribute to put script tags in the head tag to avoid the error --> <script src="script1.js" defer></script> <script src="index1.js" defer></script> <script src="script2.js" defer></script> </head>
Summary
You now understand what offsetTop is and how to avoid the TypeError: Cannot read property ‘offsetTop’ of Null in JS. This error is not too difficult to fix. Make sure you use a valid DOM element when you call the offsetTop property. We hope you found this article helpful.
Thanks for reading!
Maybe you are interested:
- TypeError: getBoundingClientRect is not a function in JavaScript
- TypeError: map.has is not a function in JavaScript
- TypeError: addClass is not a function in JavaScript
Hi, I’m Cora Lopez. I have a passion for teaching programming languages such as Python, Java, Php, Javascript … I’m creating the free python course online. I hope this helps you in your learning journey.
Name of the university: HCMUE
Major: IT
Programming Languages: HTML/CSS/Javascript, PHP/sql/laravel, Python, Java