Peut sembler ne pas appliquer classList.toggle dans une boucle

voix
0

Je tente actuellement de basculer entre les images. J'ai quelques images empilées les unes sur les autres et d' abord ils ont tous un display:none;. Je veux quand je clique sur un bouton une image aléatoire à apparaître sur l'écran. Sélectionné chaque image avec querySelectorAll, fait un générateur de nombres aléatoires et mon objectif était de itérer à travers eux, et le nombre qui est choisi au moment signifierait quelle image j'allais rendre visible. Le problème est que dans la console , je vois qu'il essaie de passer la classe , mais rien ne se passe

Code de référence:

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 pour référence:

.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;
}

En outre, s'il y a quelque chose de mal avec ma boucle, j'ai essayé d'ajouter toutes les images dans un tableau et itérer aussi bien, sans succès aussi bien.

Créé 27/11/2018 à 15:11
source utilisateur
Dans d'autres langues...                            


1 réponses

voix
0

Quelques choses à corriger:

  • number n'est pas défini avant qu'il ne soit utilisé
  • Vous calculez nombre 6 fois, ne doit se produire une fois.
  • Vous appelez togglemais ne pas dire si elle doit passer au large ou (ne fonctionne pas dans IE11)
  • Vous êtes toujours juste toggeling numberet non la liste complète.

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>

Créé 27/11/2018 à 15:21
source utilisateur

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more