随机循环按计划工作，但在几次调用后卡在特定的随机数上

Question

使用 css 和 html，我创建了 13 个看起来像盒子的对象，每个对象都有独特的背景颜色。然后用javascript添加了一些随机变色功能。

我想要发生的事情：单击 13 个框中的任何一个后，每个框都会变成“新”颜色。这种“新”颜色将从每个盒子最初固定的颜色中随机选择。这将永远持续下去。

发生了什么：当单击框时，它们确实会按照我的意愿改变颜色，但在单击大约 5-10 次后，它们都会变成完全相同的颜色。

如何让功能继续运行而不停留在某种颜色？

我可能搞砸了 for 循环/所有的 javascript，但无法弄清楚。非常感谢任何帮助。

这是我的完整代码：https://codepen.io/zaemees/pen/roGgGV

一些代码：

html:

<div class="aqua1 specs"></div>
<div class="chartreuse1 specs"></div>
<div class="deeppink1 specs"></div>
<div class="dodgerblue1 specs"></div>
<div class="gold1 specs"></div>
<div class="indigo1 specs"> </div>
<div class="lightpink1 specs"></div>
<div class="mediumpurple1 specs"></div>
<div class="coral1 specs"></div>
<div class="springgreen1 specs"></div>
<div class="red1 specs"></div>
<div class="peachpuff1 specs"></div>
<div class="deepskyblue1 specs"></div>

js:

var bloop = document.getElementsByClassName('specs');

for (var i = 0; i < bloop.length; i++){
  bloop[i].onclick = function() {
    for (var i = 0; i < bloop.length; i++){
   bloop[i].style.backgroundColor = window.getComputedStyle(bloop[Math.floor(Math.random()*13)]).getPropertyValue('background-color');
  }
 }
}

Answer 1

您的代码的主要问题是您没有阻止多次选择相同的颜色。当您第一次运行它时，很有可能您的至少一种颜色会被选择两次。可以把它想象成简单地从一到十之间随机选择一个数字。随机选择一个不同的数字十次并且永不重复是非常困难的。

因此，当您再次运行您的函数时，您已经更改了每个框的 backgroundColor 属性，其中一些将具有相同的颜色，即您不再有 13 种不同的颜色可供选择。这意味着您的函数第二次运行时您的选择会减少，并且这种情况会一直持续下去，直到您最终只能选择一种或两种可能的颜色，并且每个框都以相同的颜色结束。

防止这种情况发生的一种方法是有一个您的选择数组，并在您选择它时从数组中删除您的选择。这将防止重复，这也是大多数发牌程序的工作方式，因此两个人不会都得到红心皇后。试试这个例子：

var bloop = document.getElementsByClassName('specs');

for (var i = 0; i < bloop.length; i++) {
  bloop[i].onclick = function() {
    var colours = ['aqua','chartreuse','deeppink','dodgerblue','gold','indigo','lightpink','mediumpurple','coral','springgreen','red','peachpuff','deepskyblue'];
    for (var i = 0; i < bloop.length; i++) {
      var rando = Math.floor(Math.random()*colours.length)
      bloop[i].style.backgroundColor = colours[rando];
      colours.splice(rando, 1);
    }
  }
}

.specs{
  display:inline-block;
	height:100px;
	width:100px;
	border:3px solid white;
}

.aqua1{
	background-color:aqua;
}

.chartreuse1{
	background-color:chartreuse;
}

.deeppink1{
	background-color:deeppink;
}

.dodgerblue1{
	background-color:dodgerblue;
}

.gold1{
	background-color:gold;
}

.indigo1{
	background-color:indigo;
}

.lightpink1{
	background-color:lightpink;
}

.mediumpurple1{
	background-color:mediumpurple;
}

.coral1{
	background-color:coral;
}

.springgreen1{
	background-color:springgreen;
}

.red1{
	background-color:red;
}

.peachpuff1{
	background-color:peachpuff;
}

.deepskyblue1{
	background-color:deepskyblue;
}

<div class="aqua1 specs">
	
</div>

<div class="chartreuse1 specs">
	
</div>

<div class="deeppink1 specs">
	
</div>

<div class="dodgerblue1 specs">
	
</div>

<div class="gold1 specs">
	
</div>

<div class="indigo1 specs">
	
</div>

<div class="lightpink1 specs">
	
</div>

<div class="mediumpurple1 specs">
	
</div>

<div class="coral1 specs">
	
</div>

<div class="springgreen1 specs">
	
</div>

<div class="red1 specs">
	
</div>

<div class="peachpuff1 specs">
	
</div>
<div class="deepskyblue1 specs">
	
</div>

Answer 2

我不确定我是否完全理解这段代码，但据我所知，您在两个 for 循环中都使用了变量“i”两次。我不知道这是否是故意的，但是将嵌套变量“i”更改为“j”应该可以完成这项工作。希望对您有所帮助！