Estoy tratando de entender por qué este código no vuelve a slideIndex = 0;
¿Puede alguien explicar, en el cuarto clic, me estoy volviendo indefinido en lugar de volver al primer índice de la diapositiva?
Gracias por explicarlo.
slideIndex = 0; function nextSlide() { console.log(slides[slideIndex]); slideIndex++; if(slideIndex > slides.length){ slideIndex = 0; } } En realidad, este es el código completo, por lo que estoy tratando de entender por qué slideIndex no vuelve a slideIndex = 0; Uno el slideIndex > myArray.length; necesita volver a inicializar slideIndex, pero recibo este error:
TypeError no capturado: no se pueden leer las propiedades de undefined (leyendo 'estilo') en HTMLButtonElement.
Por favor ayuda:
slideIndex=0; const prevbtn = document.querySelector(".prev"); const nextbtn = document.querySelector(".next"); let myArray = document.querySelectorAll("img"); let i = 0; for (i = 0; i < myArray.length; i++) { myArray[i].style.display = "none"; } myArray[slideIndex].style.display = "block"; nextbtn.addEventListener("click", function(){ myArray[slideIndex+1].style.display="block"; slideIndex++; if(slideIndex >= myArray.length-1){ console.log("yes"); slideIndex=0; } }); prevbtn.addEventListener("click", function(){ });(esta respuesta se refiere al código proporcionado por el autor dentro de otra respuesta)
el problema es esta línea: myArray[slideIndex+1].style.display="block";
digamos que hay 9 elementos en myArray y slideIndex es 8. entonces lo anterior intenta establecer el estilo en myArray[9] que no existe.
puede solucionar esto moviendo el cambio de estilo después de haber ajustado y validado el índice de slideIndex (en las próximas dos líneas), o puede usar un ajuste de módulo como este: myArray[(slideIndex+1)%myArray.length].style.display="block";
Gracias por responder, pero estoy usando esto: myArray[slideIndex+1].style.display="block"; para saltar con el primer clic a la siguiente imagen; de lo contrario, debe hacer clic dos veces antes de pasar a la siguiente imagen.
Ahora tengo este código que parece funcionar, excepto que tengo que hacer clic dos veces cuando se carga la página para obtener la siguiente imagen. ¿Cómo se puede arreglar eso?
let slideIndex=0; const prevbtn = document.querySelector(".prev"); const nextbtn = document.querySelector(".next"); let myArray = document.querySelectorAll("img"); let i = 0; for (i = 0; i < myArray.length; i++) { myArray[i].style.display = "none"; } myArray[slideIndex].style.display = "block"; nextbtn.addEventListener("click", function(){ if(slideIndex > myArray.length-1){ slideIndex = 0; for (i = 0; i < myArray.length; i++) { myArray[i].style.display = "none"; } myArray[slideIndex].style.display = "block"; } myArray[slideIndex].style.display = "block"; console.log(slideIndex); slideIndex++; }); prevbtn.addEventListener("click", function(){ });Esto está funcionando, pero no estoy seguro de si este es un buen código escrito, excepto que puedo simplificar el código.
let slideIndex=0; const prevbtn = document.querySelector(".prev"); const nextbtn = document.querySelector(".next"); let myArray = document.querySelectorAll("img"); let i = 0; for (i = 0; i < myArray.length; i++) { myArray[i].style.display = "none"; } myArray[slideIndex].style.display = "block"; nextbtn.addEventListener("click", function(){ if(slideIndex == 0){ slideIndex = slideIndex + 1; } if(slideIndex > myArray.length-1){ slideIndex = 0; for (i = 0; i < myArray.length; i++) { myArray[i].style.display = "none"; } myArray[slideIndex].style.display = "block"; } if(slideIndex<myArray.length){ myArray[slideIndex].style.display = "block"; console.log(slideIndex); } slideIndex++; }); prevbtn.addEventListener("click", function(){ });