st4rgut st4rgut - 23 days ago 5
Javascript Question

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
}

Answer

The function is calling itself at

setTimeout(slideshow(), 3000);
                    ^^

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

Comments