Javascript slider errors in console and not sliding

Question

The page works fine, but the slider doesn't slide to the next image. JSFiddle makes it work out fine and the images slide, yet on localhost or any live website it fails.

<script>

    var slides = document.querySelectorAll('#slides.klant');
var currentSlide = 0;
var slideInterval = setInterval(nextSlide,2000);

function nextSlide(){
    slides[currentSlide].className = 'klant';
    currentSlide = (currentSlide+1)%slides.length;
    slides[currentSlide].className = 'klant showing';
}


</script>

<title>Untitled Document</title>
</head>

<body>

<div id="ads">
<ul id="slides">
    <li class="klant showing"><img src="img/first.jpg"></li>
    <li class="klant"><img src="img/second.jpg"></li>
    <li class="klant"><img src="img/third.jpg"></li>
    <li class="klant"><img src="img/fourth.jpg"></li>
    <li class="klant"><img src="img/fifth.jpg"></li>
</ul>
</div>

I get an error "Uncaught TypeError: Cannot set property 'className' of undefined" on the slides[currentSlide].className = 'klant'; part of the function but can't figure out what's going wrong.

Please take a care look at timing. Your script in head is executed before body exists. — Teemu
– Teemu, Commented Sep 26, 2016 at 12:35
Place your <script> as last-child of <body>(Just before closing body tag(</body>)) — Rayon
– Rayon, Commented Sep 26, 2016 at 12:35
Move your script tag to the end of your document before the closing body tag. — Isabel Inc
– Isabel Inc, Commented Sep 26, 2016 at 12:38

Oluwafemi · Accepted Answer · 2016-09-26 15:10:42Z

1

With input from Teemu(see comments below), the major issue is that your script is loaded before the HTML. Thus, the elements are undefined at the point the script ran. Wrapping the script in an onload event should solve the problem and putting a space between #slides and .klant in your script. See below example:

<script>

window.onload = function () {
   var slides = document.querySelectorAll('#slides .klant');
   var currentSlide = 0;
   var slideInterval = setInterval(nextSlide,2000);


function nextSlide(){
        slides[currentSlide].className = 'klant';
        currentSlide = (currentSlide+1)%slides.length;
        slides[currentSlide].className = 'klant showing';
    }

 }

</script>

edited Sep 26, 2016 at 15:10

answered Sep 26, 2016 at 12:37

Oluwafemi

15k11 gold badges47 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Teemu Over a year ago

This is magic, how would getElementsByClassName method find elements which are not even created yet?

Oluwafemi Over a year ago

They are created. See the HTML in the question

Teemu Over a year ago

They are certainly not created, do you see </head><body> pair in the HTML? How is the script placed related to <body>? What is guaranteed to be executed before anything else in a HTML document? Where is slides defined? When it is referred?

Oluwafemi Over a year ago

@Teemu You also need to understand that there's a delay. This gives room for the HTML to be fully loaded and slides will definitely have values when nextSlide() is fired.

Oluwafemi Over a year ago

@Teemu Thanks for the input. I really understand now why it was magical :)

|

O_Z · Accepted Answer · 2016-09-26 12:35:41Z

1

the script executes before the page finished loading, so the querySelectorAll returns an empty array. copy your script to the end of the <body> and it will work fine.

On JsFiddle it works because by default script executes there after load.

answered Sep 26, 2016 at 12:35

O_Z

1,5639 silver badges11 bronze badges

Comments

user1363245 · Accepted Answer · 2016-09-26 12:40:26Z

1

Just Replace
 line var slides = document.querySelectorAll('#slides.klant');

with

    var sliderparent = document.getElementById('slides');
var slides = sliderparent.querySelectorAll('.klant');

answered Sep 26, 2016 at 12:40

user1363245

1 Comment

user1363245 Over a year ago

yes, right have to replace whole script tag in bottom of page, Thank @Teemu

Collectives™ on Stack Overflow

Javascript slider errors in console and not sliding

3 Answers 3

6 Comments

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

1 Comment

Related