CODEWITHSUNDEEP
javascript
I Like
I Like

Reputation: 1847

slideshow made with javascript exceeds call stack

i'm trying to build a simple self-running slideshow with javascript. When I execute the following code I get an error message that the maximum call stack size has been exceeded. I'm not sure exactly what this means, but the computer can't find the image's location and lists it as undefined. Please tell me where I am going wrong. Thank you for your help

var slide = 0 /* the tracker for every picture */
var left_arrow = document.getElementById("arrow_left")
var right_arrow = document.getElementById("arrow_right")
var gallery = document.getElementById("picture")
slideshow(0);
length = images.length - 1

function slideshow(slide) {
  images = ["blackchicken.jpg", "bantamchicken.jpg", "goldenegg.jpeg"]
  console.log(slide)
  pic = '<img src="' + images[slide] + '">'
  console.log(pic)
  gallery.innerHTML = pic
  slide += 1;
  if (slide == length) {
    slide = 0
  }
  setTimeout(slideshow(), 3000); // Change image every 3 seconds
}

Upvotes: 0

Views: 51

Answers (1)

Ali Naci Erdem
Ali Naci Erdem

Reputation: 435

The function is calling itself at

setTimeout(slideshow(), 3000);
                    ^^

And this is filling the stack in an infinite loop, which explains your problem.

Upvotes: 2

Related Questions