Кажется, не может применить classList.toggle в цикле

Question

Я сейчас пытаюсь переключаться между изображениями.У меня есть пара изображений, сложенных друг на друга, и первоначально у всех них есть display:none;.Я хочу, чтобы при нажатии кнопки случайное изображение появлялось на экране.Выделил каждое изображение с помощью querySelectorAll, создал генератор случайных чисел, и моя цель состояла в том, чтобы их перебрать, и число, выбранное в данный момент, будет указывать, какое изображение я собирался сделать видимым.Проблема в том, что в консоли я вижу, что он пытается переключить класс, но ничего не происходит

Код для справки:

var button = document.querySelector(".btn-roll");

button.addEventListener("click", function() {
  var images = document.querySelectorAll(".dice");
  for (var i = 0; i < 6; i++) {
  var number =  Math.floor((Math.random() * 6) + 0);
  }

  for(var i = 0; i < images.length; i++) {
    images[number].classList.toggle("Appear");
  }
})

CSS для справки:

.dice {
  position: absolute;
  left: 50%;
  top: 178px;
  transform: translateX(-50%);
  height: 100px;
  box-shadow: 0px 10px 60px rgba(0, 0, 0, 0.10);
  display: none;
}

.Appear {
  display:block;
}

Кроме того, если что-то не так с моим циклом for, я попытался добавить все изображения в массив и повторить его, но также безуспешно.

Answer 1

Несколько вещей, которые нужно исправить:

• number не определено до его использования
• Вы вычисляете число 6 раз, это должно произойти только один раз.
• Вы звоните toggle, но не говорите, следует ли ему отключить или включить (не работает в IE11)
• Вы всегда просто переключаете number, а не весь список.

var button = document.querySelector(".btn-roll");

button.addEventListener("click", function() {
  var images = document.querySelectorAll(".dice");
  var number =  Math.floor((Math.random() * 6) + 0);

  for(var i = 0; i < images.length; i++) {
    images[i].classList.toggle("Appear", i === number);
  }
})

.dice {
  position: absolute;
  left: 50%;
  top: 178px;
  transform: translateX(-50%);
  height: 100px;
  box-shadow: 0px 10px 60px rgba(0, 0, 0, 0.10);
  display: none;
}

.Appear {
  display:block;
}

<button class="btn-roll">Roll</button>
<div class="dice">1</div>
<div class="dice">2</div>
<div class="dice">3</div>
<div class="dice">4</div>
<div class="dice">5</div>
<div class="dice">6</div>