create photo gallery with controlled time interval by user

Question

I have read that lesson: http://html.net/tutorials/javascript/lesson17.php which contains an example: http://html.net/tutorials/javascript/lesson17_ex1.html but I need to create a photo gallery with possibility to choose time between photos by user, so I want to modified that line of code:

galleryStarter = setTimeout("startGallery()", 2000);

to be as user want, so I add:

<input type="text" name="name" id="name"><br>   
<input type="button" id="btnSub" value="User gallery"/>
<input type="button" id="btnSub" value="User gallery"/>

also:

var btnStart = document.getElementById("btnStart");
var btnStop = document.getElementById("btnStop");
var btnSub  = document.getElementById("btnSub");

btnStart.onclick = startGallery;
btnStop.onclick = stopGallery;
btnSub.onclick = userGallery;

and:

function userGallery()
{
curImage.src = preloadedImgs[counter].src;
counter ++;
if (counter == preloadedImgs.length)
{
counter = 0;
}
var c=document.getElementById("name").value;
galleryStarter = setTimeout("userGallery()", c);
window.alert(c);
isGalleryOn = true;
}

but id didn't work.. what is the reason?

Answer 1

It is because you didn't clear previous timer.

clearTimeout(galleryStarter);
isGalleryOn = false;

Inside function userGallery() will solved your issue.

Check Fiddle Here.