I have some simple CSS animation to occur when a touch start event is detected however keep getting "undefined is not an object" when trying to add a class to a div element. Please check this on mobile as it's activated through a touch event. I want to add a class with new value to all the li items inside a div. I tried console logging each list item before adding the class and prints in the console fine. it's pretty straightforward but i cant figure out why I'm getting this error only when adding the class. The CSS for animations needs to only occur on mobile so i added those new class in the media queries.
Here's the working website.
container.addEventListener('touchstart', handlePanStart, false);
function handlePanStart() {
const target = document.querySelectorAll('.top')
let yOffset = window.pageYOffset;
console.log('start', 'ypos: ' + yOffset)
target.forEach((item) => {
console.log(item.classList)
item.classlist.add('longer')
})
}ul {
height: 50vh;
flex-direction: column;
transform: translateY(0);
}
.top {
height: 5px;
width: 95vw;
transition: all 2s ease-out;
}
.top img {
width: 100%;
height: auto;
object-fit: cover;
border: 2px solid black;
pointer-events: none;
}
.longer {
height: 205px;
}<ul>
<li class="top"><img src="https://www.fillmurray.com/640/360"></li>
<li class="top"><img src="https://www.fillmurray.com/640/360"></li>
<li class="top"><img src="https://www.fillmurray.com/640/360"></li>
<li class="top"><img src="https://www.fillmurray.com/640/360"></li>
<li class="top"><img src="https://www.fillmurray.com/640/360"></li>
<li class="top"><img src="https://www.fillmurray.com/640/360"></li>
<li class="top"><img src="https://www.fillmurray.com/640/360"></li>
<li class="top"><img src="https://www.fillmurray.com/640/360"></li>
<li class="top"><img src="https://www.fillmurray.com/640/360"></li>
</ul>Change classlist to classList (camel-case). classlist is undefined in the DOM.