Как случайным образом назначить классы в массиве элементу, созданному в цикле for

Question

Я использую цикл for, чтобы создать множество элементов div, назначить имя класса и добавить родительский элемент div. У меня возникли трудности с дополнительным включением большего количества классов - случайным образом - из массива. Ниже приведен фрагмент.

let classesArray = ['slowest', 'slow', 'medium', 'fast', 'fastest'];
let randomClass = classesArray[Math.floor(Math.random() * classesArray.length)];

for (i = 0; i < 100; i++) {
  const test = document.createElement('div');
  test.className = 'speed ' + randomClass;
  document.getElementById('div-parent').appendChild(test);
}

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

Я надеюсь, что это будет выглядеть примерно так

<div id="div-parent">
  <div class="speed fast"></div>
  <div class="speed slow"></div>
  <div class="speed medium"></div>
  ...

Но это заканчивается примерно так

<div id="div-parent">
  <div class="speed fast"></div>
  <div class="speed fast"></div>
  <div class="speed fast"></div>
  ...

Можно ли случайно выбрать класс из массива и не повторять его для всех дочерних элементов?

Answer 1

Ваш код неверен... потому что let randomClass = classesArray[Math.floor(Math.random() * classesArray.length)]; существует во внешнем цикле.

переместить внутренний цикл ~

let classesArray = ['slowest', 'slow', 'medium', 'fast', 'fastest'];


for (i = 0; i < 100; i++) {
  const randomIndex = Math.floor(Math.random() * classesArray.length));
  const randomClass = classesArray[randomIndex];

  const test = document.createElement('div');
  test.className = 'speed ' + randomClass;
  document.getElementById('div-parent').appendChild(test);
}

Answer 2

Являющийся randomClass создается вне цикла, он имеет одинаковое значение в каждом начале цикла.

декларировать randomClass внутри цикла, чтобы он мог принимать вновь сгенерированный случайный класс в каждой итерации:

let classesArray = ['slowest', 'slow', 'medium', 'fast', 'fastest'];

for (let i = 0; i < 3; i++) {
  let randomClass = classesArray[Math.floor(Math.random() * classesArray.length)];
  const test = document.createElement('div');
  test.className = 'speed ' + randomClass;
  document.getElementById('div-parent').appendChild(test);
}

console.log(document.getElementById('div-parent').innerHTML)

<div id="div-parent"></div>