CODEWITHSUNDEEP
javascriptrecursion
Oreodad
Oreodad

Reputation: 23

how to get variable's value from recursion function

Please see the code. I can't get the variable's value from this displayNextSlide() function. I want to have another variable to get the index's value after the recursion stop. I want tempIndex have index's value after the recursion.

var index = 0;
let tempIndex = 0;
var x = document.getElementsByClassName("mySlides");

function displayNextSlide() {
  for (var i = 0; i < x.length; i++) {
    if (i === index) {
      x[i].style.display = "block";
    } else {
      x[i].style.display = "none";
    }
  }
  index++;
  if (index == x.length) {
    clearInterval(interval);
  }
}
displayNextSlide();
var interval = setInterval(displayNextSlide, 500);
console.log(index);
<!DOCTYPE html>
<html>
<title>test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
  .mySlides {
    display: none;
  }
</style>

<body>

  <h2 class="w3-center">Slideshow test</h2>

  <div class="w3-content w3-section" style="max-width:500px">
    <div class="mySlides" src="1.jpg" style="width:100%">1</div>
    <div class="mySlides" src="2.jpg" style="width:100%">2</div>
    <div class="mySlides" src="3.jpg" style="width:100%">3</div>
    <div class="mySlides" src="4.jpg" style="width:100%">4</div>
    <div class="mySlides" src="5.jpg" style="width:100%">5</div>
    <div class="mySlides" src="6.jpg" style="width:100%">6</div>
    <div class="mySlides" src="7.jpg" style="width:100%">7</div>
    <div class="mySlides" src="8.jpg" style="width:100%">8</div>
    <div class="mySlides" src="9.jpg" style="width:100%">9</div>
    <div class="mySlides" src="10.jpg" style="width:100%">10</div>
  </div>

Upvotes: 0

Views: 66

Answers (1)

Ivan86
Ivan86

Reputation: 5708

You can simply set the value of tempIndex inside the function, the tempIndex variable will be updated with a new value, which you can check with another setInterval for example:

// these variables are global
var tempIndex = 0;
var stopTheSlideshow = true;
var currentInterval;

// function to start and stop the setInterval
function startStop()
{
  if(stopTheSlideshow)
  {
      stopTheSlideshow = false;
      currentInterval = setInterval(displayNextSlide, 500);
  }
  else stopTheSlideshow = true;
}


function displayNextSlide()
{
  var x = document.getElementsByClassName("mySlides");
  
  if(stopTheSlideshow) 
  {
     clearInterval(currentInterval);
     console.log('tempIndex is now ' + tempIndex);
  }
  // go in circles
  if(tempIndex == x.length) tempIndex = 0;
  
  for (var i = 0; i < x.length; i++)
  {
    if (i == tempIndex)
    {
      x[i].style.display = "block";
    }
    else
    {
      x[i].style.display = "none";
    }
  }
  tempIndex++;
  
  // I changed this so the program will not stop automatically
  if (tempIndex == x.length)
  {
    tempIndex = 0;
  }
}

// this will print immidiately
console.log('This is the initial value for tempIndex ' + tempIndex);
.mySlides
{
  display: none;
}
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>

  <h2 class="w3-center">Slideshow test</h2>

  <div class="w3-content w3-section" style="max-width:500px">
    <div class="mySlides" style="width:100%"><img src="1.jpg" alt="1" /></div>
    <div class="mySlides" style="width:100%"><img src="2.jpg" alt="2" /></div>
    <div class="mySlides" style="width:100%"><img src="3.jpg" alt="3" /></div>
    <div class="mySlides" style="width:100%"><img src="4.jpg" alt="4" /></div>
    <div class="mySlides" style="width:100%"><img src="5.jpg" alt="5" /></div>
    <div class="mySlides" style="width:100%"><img src="6.jpg" alt="6" /></div>
    <div class="mySlides" style="width:100%"><img src="7.jpg" alt="7" /></div>
    <div class="mySlides" style="width:100%"><img src="8.jpg" alt="8" /></div>
    <div class="mySlides" style="width:100%"><img src="9.jpg" alt="9" /></div>
    <div class="mySlides" style="width:100%"><img src="10.jpg" alt="10" /></div>
  </div>
  
  <input type="button" value="click to start/stop" onclick="startStop()" />
</body>
</html>

Edit: I erased the variable index as there was no need for it, tempIndex is enough to do the job. I also changed the program so it doesn't start or stop automatically but rather by a press on a button. The pictures will infinitely loop.

Upvotes: 1

Related Questions