javascript setInterval function not working for me

Question

I try to create a slideShow and i need to retry my function by new argument but when i try to use setInterval() function it just run a one time. WHY REALY?

var sIndex = 0;
var slide = document.getElementsByClassName('slide');

function slider(n) {
  if (sIndex + n >= 0 && sIndex + n <= slide.length - 1) {
    slide[sIndex].style.display = "none";
    sIndex += n;
    slide[sIndex].style.display = "block";
  } else if (sIndex + n < 0) {
    slide[sIndex].style.display = "none";
    sIndex = slide.length - 1;
    slide[sIndex].style.display = "block";

  } else if (sIndex + n > slide.length - 1) {
    slide[sIndex].style.display = "none";
    sIndex = 0;
    slide[sIndex].style.display = "block";
  }
}
setInterval(function() {
  slider(sIndex);
}, 2000);

You don't need the variable n

Satpal
– Satpal

2016-12-30 08:03:36 +00:00
Commented Dec 30, 2016 at 8:03 — Satpal
– Satpal, Commented Dec 30, 2016 at 8:03

ppasler · Accepted Answer · 2016-12-30 08:26:13Z

1

sIndex stays 0 all the time have a look at your code.

var sIndex = 0;
var slide = document.getElementsByClassName('slide');

function slider(n) {
  // first run: n=0 plus sIndex=0, leads to sIndex stays 0 every loop
  if (sIndex + n >= 0 && sIndex + n <= slide.length - 1) {
    slide[sIndex].style.display = "none";
    sIndex += n;
    slide[sIndex].style.display = "block";
  } else if (sIndex + n < 0) {
    slide[sIndex].style.display = "none";
    sIndex = slide.length - 1;
    slide[sIndex].style.display = "block";

  } else if (sIndex + n > slide.length - 1) {
    slide[sIndex].style.display = "none";
    sIndex = 0;
    slide[sIndex].style.display = "block";
  }
  console.log(new Date(), sIndex)
}
setInterval(function() {
  slider(sIndex);
}, 2000);

<div class="slide"></div>

EDIT: My answer gives the reason, but no solution. @Satpal 's code gives one: Remove n and add 1 instead.

edited Dec 30, 2016 at 8:26

answered Dec 30, 2016 at 8:07

ppasler

3,7196 gold badges36 silver badges54 bronze badges

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

Comments

Satpal · Accepted Answer · 2016-12-30 08:04:55Z

1

You don't need the variable n remove it.

var sIndex = 0;
var slide = document.getElementsByClassName('slide');

function slider() {
  if (sIndex  >= 0 && sIndex<= slide.length - 1) {
    slide[sIndex].style.display = "none";
    sIndex += 1;
    slide[sIndex].style.display = "block";
  } else if (sIndex < 0) {
    slide[sIndex].style.display = "none";
    sIndex = slide.length - 1;
    slide[sIndex].style.display = "block";
  } else if (sIndex > slide.length - 1) {
    slide[sIndex].style.display = "none";
    sIndex = 0;
    slide[sIndex].style.display = "block";
  }
}
setInterval(slider, 2000);

answered Dec 30, 2016 at 8:04

Satpal

134k13 gold badges168 silver badges171 bronze badges

Collectives™ on Stack Overflow

javascript setInterval function not working for me

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related