Estoy tratando de hacer una animación simple donde una imagen cambia de A a B a C con solo hacer clic en un botón. Me estoy quedando atascado en Cannot read properties of undefined (reading 'classList') , pero no puedo entender qué hice mal; Usé una estructura similar para un carrusel sin ningún problema.
Solo estoy tratando de cambiar los elementos de "semilla" a ".d-none" de Bootstrap.
var javaButton = document.getElementById("button-trigger"); const track = document.querySelector(".plant-wrapper"); const slides = Array.from(track.children); const targetIndex = slides.findIndex; const hidden = document.querySelector(".d-none"); const seeds = document.querySelector(".seed"); javaButton.addEventListener("click", moveToSlide); function moveToSlide(slides, seeds, hidden, targetIndex) { if (targetIndex === 0) { seeds.classList.add("is-hidden"); hidden.classList.remove("is-hidden"); } else if (targetIndex === slides.length - 1) { seeds.classList.remove("is-hidden"); hidden.classList.add("is-hidden"); } else { seeds.classList.remove("is-hidden"); hidden.classList.remove("is-hidden"); } }; <button type="button" id="button-trigger">Check it out!</button> <div class="plant-wrapper"> <img src="images/seed.png" class="seed mx-auto d-block" id="seed1"> <img src="images/sprout.png" class="mx-auto d-block d-none" id="seed2"> <img src="images/stem.png" class="mx-auto d-block d-none" id="seed3"> <img src="images/pot.png" class="pot mx-auto d-block"> </div>El problema es que no pasa argumentos a la función moveToSlide
Puede resolver la eliminación de argumentos de la función moveToSlide (la función leerá las variables declaradas anteriormente)
function moveToSlide() { // Code... }O pasar valores a la función (mejor opción)
javaButton.addEventListener("click", () => moveToSlide(slides, seeds, hidden, targetIndex))Si su objetivo final es crear un control deslizante, hay una mejor manera de hacerlo.
w3schools tiene una demostración: https://www.w3schools.com/howto/howto_js_slideshow.asp
Aquí está mi manera de hacer un control deslizante:
índice.html
<button type="button" id="button-trigger" onclick="changeImg()">Check it out!</button> <div class="plant-wrapper" id="plant-wrapper"> </div>índice.js
var index = 0; const imageArray = [ "images/1.png", "images/2.png", "images/3.png", "images/4.png" ]; function changeImg(){ (index == imageArray.length - 1 ? index = 0 : index++); showImage(); } function showImage(){ document.getElementById("plant-wrapper").innerHTML = '<img src="' + imageArray[index] + '" class="mx-auto" />'; } window.onload = function() { showImage() }