Solutions To Fix TypeError: getBoundingClientRect Is Not A Function In JavaScript

Posted on by Cora Lopez
TypeError: getBoundingClientRect is not a function in JavaScript

The getBoundingClientRect() function is a little-known function. Therefore, when we get the error TypeError: getBoundingClientRect is not a function in JavaScript, it’s difficult to look it up and fix it. So, in this article, we will clarify the cause and how to fix this error. Continue reading the article to know more.

What is getBoundingClientRect?

getBoundsClientRect() is a JavaScript DOM function that gives you essential information about the size and position of an HTML element relative to the viewport.

Causes of the TypeError: getBoundingClientRect is not a function in JavaScript, and how to fix it?

Here we will list two common causes of this annoying error. For each cause, we provide a solution with a sample code to make it easier for you to understand.

Call getBoundingClientRect() on an object that is not a DOM element

This reason is the most common cause of this error. The getBoundingClientRect() function is provided by Web APIs and only works on DOM objects. If we call it on a non-DOM object like Array, NodeList, or String, JavaScript will throw an error.

Let’s say we have the following HTML structure:

<div class="wrapper">
  <div class="circle"></div>
  <div class="triangle"></div>
  <div class="square"></div>
</div>

We use the getElementsByClassName() function to get an element without knowing that the return value is an HTMLCollection.

// Get the circle using getElementsByClassName()
const circle = document.getElementsByClassName("circle");

console.log(circle); // HTMLCollection

// Call getBoundingClientRect() on an HTMLCollection
console.log(circle.getBoundingClientRect());

As a result, we get an error like this:

HTMLCollection [div.circle]
TypeError: circle.getBoundingClientRect is not a function

In this case, how to fix it?

Make sure that the object calling the getBoundingClientRect() function is a DOM element. So, instead of using getElementsByClassName(), we can use querySelector() because querySelector() returns a DOM element.

// Get the circle using querySelector()
const circle = document.querySelector(".circle");

console.log(circle); // DOM element

// Call getBoundingClientRect() on an DOM element
console.log(circle.getBoundingClientRect());

Output:

<div class="circle"></div>
DOMRect {x: 455.25, y: 332, width: 100, height: 100, top: 332, ...}

Use the wrong function name

This cause is a common mistake made by beginners. We can see it as a misspelling. For example, instead of getBoundingClientRect(), some people type GetBoundingClientRect() as below.

// Get the triangle using querySelector()
const triangle = document.querySelector(".triangle");

// Call GetBoundingClientRect() on triangle
console.log(triangle.GetBoundingClientRect()); // Error!

Error:

TypeError: triangle.GetBoundingClientRect is not a function

It is very easy to fix the error in this case. As long as we carefully type in the correct spelling, this error will not occur. We recommend using a code editor with code suggestions to avoid silly spelling mistakes.

// Get the triangle using querySelector()
const triangle = document.querySelector(".triangle");

// Type getBoundingClientRect() correctly to avoid unexpected errors
console.log(triangle.getBoundingClientRect());

Output:

DOMRect {x: 610.5, y: 348, width: 200, height: 100, top: 348, ...}

Summary

In summary, we have clarified two causes and how to fix the TypeError: getBoundingClientRect is not a function in JavaScript. TypeError is an error related to data types in JS. Hopefully, through this article, you will be able to fix the same errors as the one we discussed.

What else makes you difficult? Just go to LearnShareIT and search!

Maybe you are interested:

Related Posts

Leave a Reply

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