Do not repeat the last used background color-CodePudding

How can I make the next background color I use not repeat the last one used? ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ

<div id="change">

</div>
<div id="change" >

</div>
<div id="change" >

</div>
<div id="change" >

</div>
<div id="change" >

</div>
<div id="change" >

</div>

let colores = ["#7579CD", "#7593CD", "#75C8CD", "#75CDAD","#A175CD", "CD7575"]

document.addEventListener("DOMContentLoaded", function (event) {
start()});
function start() {
    item = document.querySelectorAll(".sus")

    document.querySelectorAll('.sus').forEach(item => {
        
            item.style.backgroundColor = colores[Math.floor(Math.random() * colores.length)]
            
    })}

CodePudding user response：

Create a variable let i = 0 before entering the loop, then use item.style.backgroundColor = colores[i]; i ; or if you must do it randomly, I suggest you copy the array of colors and remove the color in every iteration of foreach

CodePudding user response：

The simplest method would be to maintain the last used color in a variable and check every time if the new color is not the same as last color.

function start() {
  item = document.querySelectorAll(".sus")

  let lastColor = null;

  document.querySelectorAll('.sus').forEach(item => {
    let newColor = null;
    do {
      newColor = colores[Math.floor(Math.random() * colores.length)]
    } while (newColor === lastColor);

    item.style.backgroundColor = newColor;
    lastColor = newColor;

  })

CodePudding user response：

You need the following logic. Use memoization technique to save the last value.

function start() { 
  
    item = document.querySelectorAll(".sus")
   let color='';
    document.querySelectorAll('.sus').forEach(item => {
      
      color= getNonRepeatableColor(color); 

      item.style.backgroundColor = color;
       
})}
       
function getNonRepeatableColor(lastColor){

      let nextColor=colores[Math.floor(Math.random() *       colores.length)];
  
  if(nextColor===lastColor){ 
   return getNonRepeatableColor(lastColor);
  }

  return nextColor;
}

Use recursion for every time you encounter a case where the last color equals the current value in the sequence.

CodePudding user response：

If you want to ensure that no color is used more than once then, when you have picked a color, you can remove it from the array so it can't be used again.

This snippet uses the JavaScript function filter to remove all instances of the picked color from the array of colors.

let colores = ["#7579CD", "#7593CD", "#75C8CD", "#75CDAD", "#A175CD", "#CD7575"]

document.addEventListener("DOMContentLoaded", function(event) {
  start()
});

function start() {

  document.querySelectorAll('.sus').forEach(item => {
    const col = colores[Math.floor(Math.random() * colores.length)];
    item.style.backgroundColor = col;
    colores = colores.filter(color => color != col);
  })
}

.sus {
  /* just for demo */
  width: 100px;
  height: 100px;
}

<style>

</style>
<div >

</div>
<div >

</div>
<div >

</div>
<div >

</div>
<div >

</div>
<div >

</div>

If however you want to just make sure that no two adjacent colors are the same (ie that the picked color isn't the same as the last color), you can use a temporary copy of the array which has the color removed so it can't be picked.

let colores = ["#7579CD", "#7593CD", "#75C8CD", "#75CDAD", "#A175CD", "#CD7575"]

document.addEventListener("DOMContentLoaded", function(event) {
  start()
});

function start() {
  let copy = colores.slice();

  document.querySelectorAll('.sus').forEach(item => {
    const col = copy[Math.floor(Math.random() * copy.length)];
    item.style.backgroundColor = col;
    copy = colores.slice().filter(color => color != col);
  })
}

.sus {
  /* just for the demo */
  width: 100px;
  height: 100px;
}

<style>

</style>
<div >

</div>
<div >

</div>
<div >

</div>
<div >

</div>
<div >

</div>
<div >

</div>

Note: your code had several errors which have been corrected in these snippets.

The repeated use of the same id is not legal HTML. ids must be unique.

The last color in the array was missing the # color, which led to some .sus divs not getting a color set.

And, not an error, but redundant, was the setting of item at the beginning of the start function.

Note also that the methods used here ensure that the same color is not picked twice - it does not work on the indexes within colores. So if you have two items in colores with the same color then it will not work for the first scenario unless there are equal or more different colors in colores than there are .sus elements.