how to get variable's value from recursion function

Question

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>

There is no recursion here. You are calling same function in interval of some time. — Lalit, Jan 23 '18 at 05:31
I don't see any recursion here? And even if you used a recursive approach with `setTimeout`, no you [cannot return a result from an asynchronous function](https://stackoverflow.com/q/14220321/1048572) — Bergi, Jan 23 '18 at 05:33
console.log(index); is printed only one time, so you are not able to see the changed index value. call a funciton to show the latest index value !! — Vinod kumar G, Jan 23 '18 at 05:38
If you want only console.log, put console.log(index) after `index++` — bigless, Jan 23 '18 at 05:39
Yes , I just want to copy the index's value. There maybe other variable to have it. — Oreodad, Jan 23 '18 at 05:40

Ivan86 · Accepted Answer · 2018-01-23T14:24:19.273

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.

Hi .I have tried some time. My purpose is to display the images one after another. 'tempindex' have the current index of image. Next time when the function calls , image will be displayed from the tempIndex. — Oreodad, Jan 23 '18 at 07:18
@Oreodad I edited to provide an example for what I think you need. I added a button so you can test `start/stop` and see how it works, and also test `tempIndex` to see the current value. The `currentInterval` variable is declared outside all functions so it becomes `global` and so all we have to do is constantly assign the `setInterval` to that variable so we know how to stop the timer. If you wish to have the setInterval start right away automatically then you would change `var stopTheSlideshow = false;` and add `currentInterval = setInterval(displayNextSlide, 500);` at the bottom. — Ivan86, Jan 23 '18 at 12:30

how to get variable's value from recursion function

1 Answers1