Проверьте, существует ли значение в массиве, и если нет, сгенерируйте новое случайное число

#javascript #arrays #function

Вопрос:

Я создал простую html-страницу с кнопкой мыши на странице. При нажатии на кнопку цвет тела должен случайным образом изменяться с помощью одного из четырех цветов, которые я определил в массиве. Это работает. Однако иногда он генерирует один и тот же цвет дважды или более раз. Поэтому при каждом щелчке нужно придавать телу другой цвет. Я создал пустой массив и добавил сгенерированное значение в этот массив, и если значения существуют, я хочу, чтобы он сгенерировал новое случайное число.

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

1. Что делать, если все цвета были выбраны? Или вы просто хотите, чтобы цвет, выбранный последним, не был выбран снова?

2. Да, действительно, предотвратите повторный выбор последнего цвета. Спасибо.

Ответ №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];
}

Ответ №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>