Случайный цикл работает как запланировано, но застревает на определенном случайном числе после нескольких вызовов

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

Я не уверен, что полностью понимаю этот код, но из того, что я понимаю, вы используете переменную 'i' дважды в обоих циклах.Я не знаю, является ли это преднамеренным, но изменение вложенной переменной 'i' на 'j' должно сработать.Я надеюсь, что это помогает!