Can't add CSS animation to list items on touchstart event-CodePudding

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 ><img src="https://www.fillmurray.com/640/360"></li>
  <li ><img src="https://www.fillmurray.com/640/360"></li>
  <li ><img src="https://www.fillmurray.com/640/360"></li>
  <li ><img src="https://www.fillmurray.com/640/360"></li>
  <li ><img src="https://www.fillmurray.com/640/360"></li>
  <li ><img src="https://www.fillmurray.com/640/360"></li>
  <li ><img src="https://www.fillmurray.com/640/360"></li>
  <li ><img src="https://www.fillmurray.com/640/360"></li>
  <li ><img src="https://www.fillmurray.com/640/360"></li>
</ul>

CodePudding user response：

Change classlist to classList (camel-case). classlist is undefined in the DOM.