如何生成数字以便永远不会有背靠背的数组索引值？

Question

我需要一些帮助来修改 JavaScript 以确保每次点击生成的当前颜色索引值与之前的索引值不同，即确保索引号在单击按钮时不会连续重复.

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() {
  var previous = 0;
  var value;
  var max = 4 + (!isNaN(previous) ? -1 : 0);
  value = Math.floor(Math.random() * (max));
  if (value >= previous) {
    value += 1; 
  }
  previous = value;
  document.body.style.backgroundColor = colors[value];
  color.innerText = colors[value];
  return value;
}

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

Answer 1

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>

如何生成数字以便永远不会有背靠背的数组索引值？

How to generate numbers so that there's never a back-to-back array index value?

javascript

arrays

random

event-handling