Tengo una animación CSS simple que se produce cuando se detecta un evento de inicio táctil, sin embargo, sigo obteniendo "indefinido no es un objeto" cuando intento agregar una clase a un elemento div. Verifique esto en el dispositivo móvil, ya que se activa a través de un evento táctil. Quiero agregar una clase con un nuevo valor a todos los elementos li dentro de un div. Intenté registrar en la consola cada elemento de la lista antes de agregar la clase e imprimir bien en la consola. es bastante sencillo, pero no puedo entender por qué recibo este error solo cuando agrego la clase. El CSS para animaciones solo debe ocurrir en dispositivos móviles, por lo que agregué esas nuevas clases en las consultas de medios.
Aquí está el sitio web de trabajo .
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>Cambie classlist a classList (camel-case). classlist no está definido en el DOM.