I can not understand the cause of the error:

cannot set property 'classname' of undefined.

What makes it happen in this example?

var slides = document.querySelectorAll('.sliderPage__slides .sliderPage__slide'); var currentSlide = 0; var slideInterval = setInterval(nextSlide, 2000); function nextSlide() { slides[currentSlide].className = 'sliderPage__slide'; currentSlide = (currentSlide + 1) % slides.length; slides[currentSlide].className = 'sliderPage__slide sliderPage__showing'; } 
 .sliderPage { width: 100%; height: 90vh } .sliderPage__slides { position: relative; height: 300px; padding: 0px; margin: 0px; list-style-type: none } .sliderPage__slide { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; opacity: 0; z-index: 1; transition: opacity 1s; font-size: 40px; padding: 40px; box-sizing: border-box; background: #333; color: #fff } .sliderPage__showing { opacity: 1; z-index: 2 } .sliderPage__slide:nth-of-type(1) { background: red } .sliderPage__slide:nth-of-type(2) { background: green } .sliderPage__slide:nth-of-type(3) { background: blue } .sliderPage__slide:nth-of-type(4) { background: purple } .sliderPage__slide:nth-of-type(5) { background: orange } .sliderPage__slide:nth-of-type(6) { background: gold } 
 <div class="sliderPage__slider"> <ul class="sliderPage__slides"> <li class="sliderPage__slide sliderPage__showing">1</li> <li class="sliderPage__slide">2</li> <li class="sliderPage__slide">3</li> <li class="sliderPage__slide">4</li> <li class="sliderPage__slide">5</li> </ul> </div>

  • most likely, you have a script working before the html is loaded - Dmytryk
  • Exactly, thanks a lot, added js connection before closing </ body> and it worked - Anton Kylbashnyi

1 answer 1

 var slides = document.querySelectorAll('.sliderPage__slides .sliderPage__slide'); var currentSlide = 0; var slideInterval = setInterval(nextSlide, 2000); function nextSlide() { console.log("nextSlide 1:", currentSlide, slides.length); slides[currentSlide].className = 'sliderPage__slide'; currentSlide = (currentSlide + 1) % slides.length; console.log("nextSlide 2:", currentSlide, slides.length); slides[currentSlide].className = 'sliderPage__slide sliderPage__showing'; } 
 .sliderPage { width: 100%; height: 90vh } .sliderPage__slides { position: relative; height: 300px; padding: 0px; margin: 0px; list-style-type: none } .sliderPage__slide { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; opacity: 0; z-index: 1; transition: opacity 1s; font-size: 40px; padding: 40px; box-sizing: border-box; background: #333; color: #fff } .sliderPage__showing { opacity: 1; z-index: 2 } .sliderPage__slide:nth-of-type(1) { background: red } .sliderPage__slide:nth-of-type(2) { background: green } .sliderPage__slide:nth-of-type(3) { background: blue } .sliderPage__slide:nth-of-type(4) { background: purple } .sliderPage__slide:nth-of-type(5) { background: orange } .sliderPage__slide:nth-of-type(6) { background: gold } 
 <div class="sliderPage__slider"> <ul class="sliderPage__slides"> <li class="sliderPage__slide sliderPage__showing">1</li> <li class="sliderPage__slide">2</li> <li class="sliderPage__slide">3</li> <li class="sliderPage__slide">4</li> <li class="sliderPage__slide">5</li> </ul> </div>

  • Unfortunately it did not help ( - Anton Kylbashnyi
  • On the built-in demo I see that everything works as it should, but if I just copy the same code into my document and run it in the browser, the error remains all the same - Anton Kylbashnyi
  • @AntonKylbashnyi Add console.log calls to nextSlide like mine. What is in the browser console before an error occurs there? - Igor
  • The problem was that classList addressed elements that were allegedly not yet created in DOM. I connected the script before closing the body and everything started to work. Thank you so much for your help - Anton Kylbashnyi