Skip to main content

How to Resolve "TypeError: getBoundingClientRect is not a function" Error in JavaScript

The TypeError: getBoundingClientRect is not a function is a common error in client-side JavaScript. It occurs when you try to call the .getBoundingClientRect() method on a value that is not a single DOM element. This typically happens when your element selector returns a collection of elements (like a NodeList) or null, instead of the one element you were expecting.

This guide will explain the primary causes of this error and show you how to fix it by ensuring you are always calling .getBoundingClientRect() on a single, valid DOM node.

The Core Problem: .getBoundingClientRect() is an Element Method​

The .getBoundingClientRect() method is a function that exists exclusively on individual DOM Elements. Its purpose is to return an object (DOMRect) containing information about the size and position of that single element relative to the viewport.

The error is the JavaScript engine telling you, "The thing you're trying to measure doesn't have a getBoundingClientRect function because it's not a single DOM element."

Example of problem:

// This is an array, not a single element.
let notAnElement = [document.createElement('div')];

// PROBLEM: Arrays do not have a .getBoundingClientRect() method.
notAnElement.getBoundingClientRect();

Error Output:

Uncaught TypeError: notAnElement.getBoundingClientRect is not a function

Cause 1 (Most Common): Calling it on a NodeList (a Collection of Elements)​

This is the most frequent cause of the error. You use a method like querySelectorAll() or getElementsByClassName() to select elements, and then you try to call .getBoundingClientRect() on the entire result. These methods return a collection (a NodeList or HTMLCollection), not a single element.

Example of problem: HTML:

<div class="box">Box 1</div>
<div class="box">Box 2</div>

JavaScript:

// Problem: `querySelectorAll` returns a NodeList of ALL matching elements.
let boxes = document.querySelectorAll('.box');

// This will throw the error because `boxes` is a list, and a list doesn't have a single position.
let rect = boxes.getBoundingClientRect();

Error Output:

Uncaught TypeError: boxes.getBoundingClientRect is not a function

Solution: you must either iterate over the collection and get the rectangle for each element, or select only a single element.

Solution A: Iterate over the NodeList If you want the position of every matching element, use a forEach() loop.

let boxes = document.querySelectorAll('.box');

boxes.forEach(box => {
  // Correct: Call the method on each individual element inside the loop.
  let rect = box.getBoundingClientRect();
  console.log(rect);
});

Solution B: Select a Single Element If you only intended to select one element, use querySelector() instead, as it returns only the first matching element.

// Correct: `querySelector` returns a single element (or null).
let firstBox = document.querySelector('.box');

if (firstBox) {
  let rect = firstBox.getBoundingClientRect();
  console.log(rect);
}

Cause 2: Calling it on null​

This happens when your element selector fails to find any matching element, so it returns null. Trying to call any method on null will always result in a TypeError.

Example of problem: HTML:

<!-- There is no element with the ID "my-element" -->

JavaScript:

// Problem: `getElementById` will return `null` because the ID doesn't exist.
let myElement = document.getElementById('my-element');

// This will throw "TypeError: Cannot read properties of null (reading 'getBoundingClientRect')"
let rect = myElement.getBoundingClientRect();

Solution: always add a "guard clause" to check if your element was actually found before you try to use it.

let myElement = document.getElementById('my-element');

// Correct: Check if the element exists before using it.
if (myElement) {
  let rect = myElement.getBoundingClientRect();
  console.log(rect);
} else {
  console.error('Error: Could not find the element with ID "my-element".');
}

You can also use optional chaining (?.) for a more concise check if you simply want to do nothing when the element is missing:

let rect = document.getElementById('my-element')?.getBoundingClientRect();
// `rect` will be `undefined` if the element doesn't exist, and no error is thrown.

A Note on Misspellings​

A simple typo can also cause this error. The method is camelCased: getBoundingClientRect.

  • getboundingclientrect (all lowercase) will fail.
  • GetBoundingClientRect (incorrect capitalization) will fail.

Ensure your method name is spelled and cased correctly.

Conclusion​

The TypeError: getBoundingClientRect is not a function is always a sign that you are not calling the method on a valid, single DOM element.

To solve it, follow this checklist:

  1. Check your selector:
    • Are you using querySelectorAll or getElementsByClassName? If so, you have a collection. You need to loop through it or access a single element by index (e.g., elements[0]).
    • Is it possible your selector is returning null? Add an if (element) check to handle cases where the element might not be found.
  2. Check your spelling: Ensure the method is spelled correctly with camelCase: getBoundingClientRect.

Table of Contents