CODEWITHSUNDEEP
javascript
Rezvania
Rezvania

Reputation: 57

javascript setInterval function not working for me

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);

Upvotes: 0

Views: 235

Answers (2)

ppasler
ppasler

Reputation: 3719

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.

Upvotes: 1

Satpal
Satpal

Reputation: 133403

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);

Upvotes: 1

Related Questions