How does this code prevent the same color from ever appearing back-to-back?

JavaScript
1

How does this code prevent the same color from ever appearing back-to-back?

Found this code online and was hoping someone could walk me through a particular section of it. So this code picks a different page-background color after each click. What I am unclear about is how exactly does the do/while statement prevent the same color from ever repeating back-to-back.

var colors = ["green", "red", "rgba(133,122,200)", "yellow"];
const btn = document.getElementById('btn');
const color = document.querySelector('.color');
btn.addEventListener('click',  randomColor);

function randomColor() {
  if(colors.length>1) {
    var next;
    do {
      next=colors[Math.floor(Math.random()*colors.length)];
    } while (next==color.innerText);
    document.body.style.backgroundColor = next;
    color.innerText = next;
  }
  else {
    console.log("Not enough colors");
  }
}

<main>
  <div class="container">
    <h2>background color: 
      <span class="color">white</span>
    </h2>
    <button class="btn btn-hero" id="btn">click me</button>  
  </div>   
</main>
3

I’m sorry, I think it won’t repeat colors. The relevant code is here:

    var next;
    do {
      next=colors[Math.floor(Math.random()*colors.length)];
    } while (next==color.innerText);
    document.body.style.backgroundColor = next;
    color.innerText = next;

So, this is basically saying:

do loop
  get new color
while new color is equal to old color, continue looping 

set background and innerText to the new value

So, it will just keep generating new colors until it finds one that doesn’t match the old one. The while (next==color.innerText) will keep it running that loop over and over until it gets a new value. I think that’s kind of a clunky way to do it, but it works.

4

Hey, thanks for taking the time to walk me through it. The part that confuses me is the while condition - meaning, while (next == color.innerText) shouldn’t come back as true. The first time that condition is checked, next is some random color from the array and color.innerText is white, which isn’t even one of the array values.

5

Well, if that’s true then it should get a new color on that first pass. It’s on the subsequent changes that it will “need” the loop.

6

I think I understand it now. We run the do statement, which comes back as …let’s say yellow. It then checks if yellow is equal to color.innerText (white). Those two are not a match, the loop stops, and the next value of yellow is the one that’s used. Round 2: the while loop runs again - this time, color.innerText is yellow and the do statement randomizer spits out yellow. The while loop checks - is yellow == to yellow? Yes! Which means we have to run the do statement again…as long as the randomizer color picks the same color as the current color.innerText, it will go back to the loop…but as soon as the do randomizer spits out a color value that isn’t equal to color.innerText which is currently yellow, that’s when the loop stops, and the non-yellow color is the one that’s used .

7

Yup, sounds like you understand it.