element.getBoundingClientRect is not a function

Question

Why does it said that element.getBoundingClientRect is not a function? I really don't know what to do.

Here is my JS:

const elementsFadeIn = document.querySelectorAll(".fade-in");
window.addEventListener("scroll", fadeIn);
function fadeIn() {
  for (i in elementsFadeIn) {
    let element = elementsFadeIn[i];
    let viewElement = element.getBoundingClientRect().top - window.innerHeight + 20;
    if (viewElement < 0) {
        element.classList.add("view-element");
    } 
    else {
        element.classList.remove("view-element");
    }
  }
}

and my css code:

.fade-in {
   transform: translateY(50px) translateZ(0);
   transition-delay: 0.7s;
   transition: 1s;
   opacity: 0;
}
     
.view-element{
  opacity: 1;
  transform: translateY(0px) rotate(0deg) translateZ(0);
}

Answer 1

You called element.getBoundingClientRect().top on a NodeList and not on the DOM element.

Solution: Access the element at index '0' of the NodeList, getting the DOM element. Remember you are using querySelectorAll so your code should be:

let viewElement = element[0].getBoundingClientRect().top 

Answer 2

Try this:

function fadeIn() {
    const elementsToFade = document.querySelectorAll(".fade-in");
    elementsToFade.forEach(element => {
        let viewElement = element.getBoundingClientRect().top - window.innerHeight + 20;
        if (viewElement < 0) {
            element.classList.add("view-element");
        } 
        else {
            element.classList.remove("view-element");
        }
    })
}

Answer 3

The issue is that that the for ... in ... loop loops over all enumerable properties of an object. The NodeList that your querySelectorAll returns has numeric keys for each contained element BUT also contains the properties item, keys, values, entries, forEach, and length.

But these additional properties are not HTMLElements, hence, they don't have the method getBoundingClientRect.

See yourself:

const items = document.querySelectorAll('.item');

for (const item in items) {
  console.log('item: ', item);
}

<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>

Instead you want to use the for ... of ... loop.

const items = document.querySelectorAll('.item');

for (const item of items) {
  console.log('item: ', item);
}

<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>