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
– Lalit, Commented Jan 23, 2018 at 5: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 — Bergi
– Bergi, Commented Jan 23, 2018 at 5: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
– Vinod kumar G, Commented Jan 23, 2018 at 5:38
If you want only console.log, put console.log(index) after index++ — bigless
– bigless, Commented Jan 23, 2018 at 5:39
Yes , I just want to copy the index's value. There maybe other variable to have it. — Oreodad
– Oreodad, Commented Jan 23, 2018 at 5:40

Ivan86 · Accepted Answer · 2018-01-23 14:24:19Z

1

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.

edited Jan 23, 2018 at 14:24

answered Jan 23, 2018 at 5:50

Ivan86

5,7182 gold badges16 silver badges30 bronze badges

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

2 Comments

Oreodad Over a year ago

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.

Ivan86 Over a year ago

@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.

Collectives™ on Stack Overflow

how to get variable's value from recursion function

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related