当 div 滚动到屏幕时，将 class 添加到 div

Question

So I am trying to add the fadeInTop class to the div with the class animation. The Javascript is not working correctly...

The console returns me this which goes back to that line: document.querySelectorAll(".animated".classList.add(fadeInTop))

Uncaught TypeError: Cannot read properties of undefined (reading 'add')
    at application.js:41:1
    at Array.forEach (<anonymous>)
    at IntersectionObserver.<anonymous> (application.js:39:1)

This is in the application.js file:

import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"


const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if(entry.isIntersecting){
      document.querySelectorAll(".animated".classList.add(fadeInTop))
    }
  })
})

observer.observe(document.querySelector(".containerFadeIn"))

This is from the home.html.erb view:

<main class="home-main">
<%# fist box %>

  <div class="home-text-1 containerFadeIn">
    <div class="row containerFadeIn">
      <div class="col-md-9 d-flex animated">
        <div class="vendo-logo-home">
          <%= image_tag "vendo-logo.png"%>
        </div>
        <div>
          <h1>The Future begins</h1>
          <h1 > with <span class="light-blue"><strong>VENDO</strong></span></h1>
        </div>
      </div>
    </div>
  </div>
</main>

my main goal is to make the text fade into the screen when the text is scrolled into the screen (if i add the fadeInTop class to the the fade in animation works)

Answer 1

This doesn't look right document.querySelectorAll(".animated".classList.add(fadeInTop))

• If you are calling document.querySelectorAll this should return node list so you need to iterate through all elements like:

document.querySelectorAll(".animated").forEach(element => element.classList.add("fadeInTop"))

Keep in mind that nodelist is not an array but it does accept forEach method. You might want to convert that into array like Array.from(document.querySelectorAll(".animated")) and then call forEach method.

• If you have only one element then you can call:

document.querySelector(".animated").classList.add("fadeInTop")