如何从将数组的输出随机化的函数中排除输出？
提问于 2019-10-04 19:46:30
我对JavaScript是个新手，所以请耐心听我说。我正在尝试随机化事件侦听器函数的结果。当元素(元素中的div)在那里被单击时，应该会将颜色更改为集合中的随机颜色。它们会改变颜色，但不会变成不同的颜色。有时，因为它是随机的，所以它会“改变”成相同的颜色。我真的不希望这样的事情发生。
我尝试的是创建一个函数来选择一个颜色，然后检查这个颜色是否已经被‘使用’了，但是它不起作用，因为在一个函数中有多个函数，它们没有正确地交互，或者我不知道如何访问它们。
我还尝试了，创建名为b=[]的第二个数组，然后添加当前颜色，然后检查随机颜色是否存在，以及是否再次运行该函数以生成新的随机颜色。
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.
回答 4
Stack Overflow用户
回答已采纳
发布于 2019-10-04 19:55:49
您可以使用集合来跟踪使用的颜色，重新拾取颜色直到未使用的颜色，然后添加新颜色以设置和删除原始颜色。
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>
Stack Overflow用户
发布于 2019-10-04 20:11:14
首先在全局范围内声明函数。do ... while循环可能是一种解决方案。
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>
Stack Overflow用户
发布于 2019-10-04 20:14:28
这比你做的要简单得多。在使用它之后只需初始化，而不是循环并在每个元素上设置事件，只需在父元素上设置它，然后使用event.target访问remove the color from the array元素。
另外，确保你总是声明你的变量。
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58242390
复制相关文章
点击加载更多
腾讯云开发者
