Radio buttons selection on regular interval is not working

Question

I want to automatically change the selection on radio buttons at regular interval. I'm calling setTimeOut in for loop after every 2000ms, but radio button selection is not changing with respect to the interval I've set. Here's my code: HTML:

<input type="radio" id="carousel1" name="carousel" checked="checked">
<input type="radio" id="carousel2" name="carousel">
<input type="radio" id="carousel3" name="carousel">

Javascript:

function autoSlideCarousel() {
  for (var n = 1; n <= 3; n++) {
    setTimeout(autoSlide(n), 2000); 
  }
}

function autoSlide(n) {
  console.log(n);
  document.getElementById("carousel"+n).checked = true;
}        

window.onload = autoSlideCarousel();

Here's JSFiddle link for more clarity: https://jsfiddle.net/16zmfb12/1/

Appreciate your help.

`setTimeout` expects to be passed a function. You are passing the return value of `autoSlide(n)`, which is `undefined`. Similarly, you have to assign a function to `window.onload`. Currently you are assigning the return value of `autoSlideCarousel()` which is `undefined` as well. *"I'm calling setTimeOut in for loop after every 2000ms"* No you don't. The loop doesn't wait until the timeout happened. It will call `setTimeout` three times almost instantly. These are all problems that have been discussed before, e.g. [setTimeout() is not waiting](http://stackoverflow.com/q/15171266/218196) — Felix Kling, Sep 29 '16 at 23:12

Rob Y · Answer 1 · 2016-09-30T20:54:06.957

1

In order to avoid running all 3 setTimeouts at once, use a global var for the counter instead of a for loop, and add the setTimeout to the end of the autoSlide() function.

var n = 1;

function autoSlide(n) {
  console.log(n);
  document.getElementById("carousel"+n).checked = true;
  if (n<3) {
    setTimeout(function() {autoSlide(n+1)},2000);
  }
}        

window.onload = function() {autoSlide(n)};

edited Sep 30 '16 at 20:54

answered Sep 29 '16 at 23:35

Rob Y

214
1
9

As mentioned in a previous comment, this is not correct: window.onload = autoSlide(n); That assigns the return value of assignSlide to window.onload, which most likely not what you want. You want the function itself to be assigned to window.onload. – StvnBrkdll Sep 29 '16 at 23:41
1

@mangotang is right, sorry. The last line should be window.onload = function() {autoSlide(n)}; – Rob Y Sep 30 '16 at 20:53

score 0 · Answer 2 · answered Sep 29 '16 at 23:28

0

Use setInterval instead, something like this:

function autoSlideCarousel() {
    setInterval(function() {
      if(n == 3) 
         n = 1;
      else if(n == 2)
         n = 3;
      else
         n = 2;
      autoSlide(n)
    }, 2000); 
}

answered Sep 29 '16 at 23:28

varontron

1,120
7
21

score 0 · Accepted Answer · answered Oct 03 '16 at 16:43

I was playing with the code and ended up with following solution: HTML:

<div id="carousel">CSS carousal</div>
<br>
<input type="radio" id="carousel1" name="carousel" checked="checked">
<input type="radio" id="carousel2" name="carousel">
<input type="radio" id="carousel3" name="carousel">

CSS:

#carousel {
  width: 200px;
  height: 200px;
  padding:20px;
  background: brown;
  color: #fff;
  text-align: center;
  font-size: 36px;
}

Javascript:

var n = 0;
window.ev = false;
function autoSlide() {
        document.getElementById("carousel").onmouseenter = function () {
            window.ev = true;
        };

        document.getElementById("carousel").onmouseleave = function () {
            window.ev = false;
            setTimeout(autoSlide, 2000);
        };

        if (window.ev == false) {
            n++;
            if (n === 4)
                n = 1;
            document.getElementById("carousel" + n).checked = true;
            setTimeout(autoSlide, 2000);
        }
    }
    autoSlide();

The above solution gives me infinite loop where selection of radio button changes after every 2000ms, and stops as soon as my focus will be on the Carousel div element. https://jsfiddle.net/16zmfb12/13/

Radio buttons selection on regular interval is not working

3 Answers3