Check if value exists in an array and if not generate a new random number

Question

I have create a simple html page with a click button in the page. When clicking on the button, the body color needs to change randomly with one of the four colors which I have defined in an Array. That is working. However it sometimes generated the same color twice or more times. So every clicks need to give the body a different color. I have created an empty array and add the generated value in this array and if the values exist, I want it generate a new random number.

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

and this my script

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.

What if all colors have been selected? Or do you just want to prevent the color last chosen from being picked again? — CertainPerformance, Jun 11 '21 at 22:58

score 0 · Answer 1 · answered Jun 11 '21 at 23:00

Sounds like you might just want to save the last random index found in a persistent variable, then make sure the value chosen isn't that one:

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

score 0 · Answer 2 · answered Jun 12 '21 at 00:15

You can store the last index in a variable and if the new one the same, then chose the next one

Here is an example :

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>

Why do you do lastIndex = -1 and could you clearify this: randnr = (randnr+1)%4 that is not really clear to me. — easyrlj, Jun 12 '21 at 13:24

Check if value exists in an array and if not generate a new random number

2 Answers2