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 >
<%# fist box %>
<div >
<div >
<div >
<div >
<%= image_tag "vendo-logo.png"%>
</div>
<div>
<h1>The Future begins</h1>
<h1 > with <span ><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)
CodePudding user response:
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")