IntersectionObserver is not detecting-CodePudding

Hello I am trying to make sections animate on scroll using IntersectionObserver. To do this i am trying to use javascript
code for css:

 .hidden{
  opacity: 0;
  filter:blur(5px);
      transform: translateX(-100%);
  transition: all 1s;

}
.show {
  opacity: 1;
  filter:blur(0px);
  transform: translateX(0);
}

code for js

const observer = new IntersectionObserver((entries)  => {
    entries.forEach((entry) => {
        console.log(entry)
        if (entry.isIntersecting) {
            entry.target.classlist.add('show');
        } else {
            entry.target.classList.remove('show');
        }
    });
});
const hiddenElements = document.querySelectorAll('.hidden');
hiddenElements.forEach((el) => observer.observe(el));

code for html:

 <section > <h1> heading </h1> </section>

after linking all the files together in html, my class hidden sections stay hidden and do not change to show

Error Message:

animater.js:5 
        
       Uncaught TypeError: Cannot read properties of undefined (reading 'add')
    at animater.js:5:36
    at Array.forEach (<anonymous>)
    at IntersectionObserver.<anonymous> (animater.js:

2:13)

I want my code to change the sections in html with the class hidden to class show so that they animate on scrolling the page / viewing the section. Currently the code gives me the above specified error and the sections with class hidden stay with their hidden class.

CodePudding user response：

you are getting error on line number 5

const observer = new IntersectionObserver((entries)  => {
    entries.forEach((entry) => {
        console.log(entry)
        if (entry.isIntersecting) {
-           entry.target.classlist.add('show');
            entry.target.classList.add('show');
        } else {
            entry.target.classList.remove('show');
        }
    });
});
const hiddenElements = document.querySelectorAll('.hidden');
hiddenElements.forEach((el) => observer.observe(el));