Así que estoy tratando de hacer un carrusel en Javascript y Uncaught TypeError: Cannot set property 'className' of undefined se muestra en mi consola para setClasses y en initCarousel. No estoy seguro de cómo solucionarlo, este es el javascript que ya he escrito. Cualquier y toda ayuda sería apreciada, muchas gracias
!(función(d){
var itemClassName = "carousel__photo"; items = d.getElementsByClassName(itemClassName), totalItems = items.length, activeSlides = 4; slideLeft = 0, slideRight = slideLeft + activeSlides - 1; //set previous, active and next images (minimum of 3 images) function setClasses(previous, firstActive, next) { items[previous].className = itemClassName + " prev"; items[firstActive].className = itemClassName + " active"; for (let i = 1; i < activeSlides; i++) { items[slideLeft + i].className = itemClassName + " active"; } items[next].className = itemClassName + " next"; } //set event listeners function setEventListeners() { var next = d.getElementsByClassName('carousel__button--next')[0], prev = d.getElementsByClassName('carousel__button--prev')[0]; next.addEventListener('click', moveNext); prev.addEventListener('click', movePrev); } //next navigation handler function moveNext() { //if right-most slide has reached end of carousel, reset carousel to start if (slideRight == (totalItems-1)) { slideLeft = 0; //else right-shift carousel based on number of slides remaining until end } else { var slidesRemaining = totalItems - slideRight - 1; slideLeft = (slidesRemaining >= activeSlides) ? slideLeft + activeSlides : slideLeft + slidesRemaining; } moveCarouselTo(slideLeft); } //previous navigation handler function movePrev() { //if left-most slide has reached start of carousel, reset carousel to end if (slideLeft === 0) { slideLeft = (totalItems - activeSlides); //left-shift carousel based on number of slides remaining until start } else { slideLeft = (slideLeft >= activeSlides) ? slideLeft - activeSlides : 0; } moveCarouselTo(slideLeft); } function moveCarouselTo(slideLeft) { slideRight = slideLeft + activeSlides - 1; //previous slide is always 1 slide before left-most slide, unless left-most slide is at start var newPrevious = (slideLeft != 0) ? slideLeft - 1 : totalItems - 1; //next slide is always 1 slide after right-most slide, unless right-most slide is at end var newNext = (slideRight != totalItems - 1) ? slideRight + 1 : 0; //reset images to default classes for (let item of items) { item.className = itemClassName; } //set new previous, active and next images setClasses(newPrevious, slideLeft, newNext); } function initCarousel() { setClasses(totalItems - 1, 0, activeSlides); setEventListeners(); } initCarousel();}(documento));
Obtiene la excepción porque alguna variable no está definida, así que exploremos y encontremos:
TypeError: no se puede establecer la propiedad ' className ' de indefinido
para esta excepción, debe mirar en qué línea está sucediendo. Según su comentario "... para setClasses y en initCarousel", parece que sucede en esta línea:
function setClasses(previous, firstActive, next) { items[previous].className = itemClassName + " prev"; // .............^ your exception } Y parece que está accediendo a un índice no válido en su matriz, lo más probable es que sus items variables estén vacíos. Este ejemplo a continuación también mostrará esta excepción, con un mensaje un poco diferente, porque el alojamiento detecta la excepción, pero en la consola de devtools es lo mismo:
var array = []; // empty array[0].className = "foo"; Debe investigar por qué los elementos están vacíos, si no está vacío, debe averiguar por qué el previous obtiene un índice no válido en los elementos, puede usar el depurador de Chrome DevTools (F12) y colocar un punto de interrupción en esta línea.
Existe la posibilidad de que los elementos estén vacíos porque está ejecutando su código antes de que la página cargue el DOM o antes de que se cargue el carrusel, por lo que puede intentar usar el evento de carga:
// you can try with "DOMContentLoaded" too document.addEventListener("load", function() { // your code goes here });o si las imágenes del carrusel se cargan con una API, puede usar algún evento de esa API para asegurarse de que su código se ejecute después de que los elementos estén presentes en DOM.