检查数组中是否存在值，如果不存在则生成新的随机数

Question

我创建了一个简单的 html 页面，页面中有一个单击按钮。 单击按钮时，主体颜色需要随机更改为我在数组中定义的四种颜色之一。 那是有效的。然而，它有时会两次或更多次生成相同的颜色。所以每次点击都需要给body一个不同的颜色。 我创建了一个空数组并将生成的值添加到该数组中，如果值存在，我希望它生成一个新的随机数。

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

这是我的脚本

const bodyColor = ["red", "#f8fdbb","rgba(0,150,3,0.5)", "yellow"];

//Getting the body
const myBody = document.body;

//getting the myBtn id
const myBtn = document.getElementById('btn');

 myBtn.addEventListener('click', myFunc);
 
 let myArray = [];

 function myFunc(){
     //get a number between 0-3  

let randnr = Math.floor(Math.random() * bodyColor.length);
console.log(randnr);

if(myArray.includes(randnr)){
alert("value exist in array"); 
?
}else{
//creating a bodycolor
const myBodyColor = bodyColor[randnr];

    //adding the created bodycolor to the body tag
myBody.style.background = myBodyColor;
myArray.push(randnr);
console.log(myArray);
}
}```

Any suggestion how to fix it?
Thanks,
E.

Answer 1

听起来您可能只想保存在持久变量中找到的最后一个随机索引，然后确保选择的值不是那个：

let lastIndex;
function myFunc() {
    let index;
    do {
        index = Math.floor(Math.random() * bodyColor.length);
    } while (index === lastIndex);
    lastIndex = index;
    myBody.style.background = bodyColor[index];
}

Answer 2

您可以将最后一个索引存储在一个变量中，如果新索引相同，则选择下一个

这是一个例子：

const bodyColor = ["red", "#f8fdbb","rgba(0,150,3,0.5)", "yellow"];

//Getting the body
const myBody = document.body;

//getting the myBtn id
const myBtn = document.getElementById('btn');

 myBtn.addEventListener('click', myFunc);
 
 let lastIndex = -1;

 function myFunc(){
     //get a number between 0-3  

    let randnr = Math.floor(Math.random() * bodyColor.length);
    console.log(randnr);

    if(randnr === lastIndex){
        console.log("same index twice"); 
        randnr = (randnr+1)%4 // added %4 to make sure the index is bettwen 0 and 3
    }
    //creating a bodycolor
    const myBodyColor = bodyColor[randnr];
  
  //adding the created bodycolor to the body tag
    myBody.style.background = myBodyColor;
  
  //saving lastIndex
  lastIndex = randnr
}

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