如何从随机化数组的 output 的 function 中排除 output？

Question

I'm quite new to JavaScript so bear with me please. I'm trying to randomize the outcome of an event listener function. When the Element (the divs in the element) are clicked there supposed to change color to a random color from the set. They change color, but not to a different color. Sometimes, because it's randomized it "changes" to the same color. I don't really want this to happen.

What I've tried is making a function that picks a color and then checks if that color is already being 'used',but it didn't work because there where multiple functions inside a function and they didn't properly interact or I couldn't figure out ho to access them.

what I also tried, was making a second array called b=[] then adding the current color, and then checking whether the random color was present and if it was running the function again to generate a new random color.

ad = document.querySelectorAll(".all div")
colors = ['yellow', 'red', 'blue', 'cornsilk']

ad.forEach((f, index) =>{
    var cc = ad[index].style.backgroundColor;
    f.addEventListener('click', ()=>{
      function makeColor(cc){
        newColor = colors[Math.floor(Math.random()*colors.length)]
        if (newColor == cc){
          makeColor();
        }
        else{
          return newColor;
        };
      };
      var a = makeColor();
      ad[index].style.backgroundColor = newColor;
    });
  });
// this almost works. It changes the colours but not to different ones.

Answer 1

you can use a set to track used colors, repick colors until an unused color, then add new color to set and remove original color.

 ad = document.querySelectorAll(".all div") colors = ['yellow', 'red', 'blue', 'cornsilk'] const used = new Set() // track used colors ad.forEach((f, index) => { f.addEventListener('click', () => { function makeColor(cc) { newColor = colors[Math.floor(Math.random() * colors.length)] // repick until unused color while (used.has(newColor)) newColor = colors[Math.floor(Math.random() * colors.length)] }; // current color var cc = ad[index].style.backgroundColor; var a = makeColor(); ad[index].style.backgroundColor = newColor; used.add(newColor); // add new color to set used.delete(cc); // remove old color from set }); });

 <div class="all"> <div>1</div> <div>2</div> <div>3</div> </div>

Answer 2

First declare the function in global scope. A do... while loop could be a solution.

 ad = document.querySelectorAll(".all div") colors = ['yellow', 'red', 'blue', 'cornsilk'] ad.forEach((f, index) => { f.addEventListener('click', (el) => { ad[index].style.backgroundColor = makeColor(el.currentTarget.style.backgroundColor); }); }); function makeColor(cc) { if (colors.length) { var newColor = colors[Math.floor(Math.random() * colors.length)]; colors.splice(colors.indexOf(newColor), 1); if (cc) colors.push(cc); return newColor; } else { return cc; } };

 .all { display: flex; }.all div { margin: 2px; width: 100px; height: 100px; border: 1px solid #666; }

 <div class="all"> <div></div> <div></div> <div></div> </div>

Answer 3

This is much simpler than you are making it. Just remove the color from the array after it's been used and instead of looping and setting the event on each element, just set it on the parent and then access the initiating element with event.target .

Also, make sure you always declare your variables.

 let ad = document.querySelector(".all"); let colors = ['yellow', 'red', 'blue', 'cornsilk']; let newColor = ""; ad.addEventListener('click', function makeColor(event){ if(colors.length){ newColor = colors[Math.floor(Math.random() * colors.length)]; event.target.style.backgroundColor = newColor; // Simply remove the used color from the array so it can be used again colors.splice(colors.indexOf(newColor),1); console.log(colors.join()); } else { console.log("No more colors to pick from;"); } });

 <div class="all"> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> </div>

Answer 4

You have the right thinking, but you should start with an array that will always give you want you want instead of hoping it will give you want you want.

One suggestion is to read up on the this context in event handlers as that can simplify your code a lot like below.

For each click we will use this (the clicked div) to get the current color, then you can filter out that current color, so you're left with an array with all the colors, but that one.

Now your makeColor() will just work since it has an array that is meant for it to begin with.

 ad = document.querySelectorAll(".all div") colors = ['yellow', 'red', 'blue', 'cornsilk'] ad.forEach(f => { f.addEventListener('click', function() { let cc = this.style.backgroundColor; let diffColors = colors.filter(color => color;== cc). function makeColor() { return diffColors[Math.floor(Math.random() * colors;length)] }. this.style;backgroundColor = makeColor(); }); });

 <div class="all"> <div>hello</div> </div>