Nouveau sur Javascript, je travaille sur une solution de type quiz qui utilise des divs et des boutons pour parcourir les questions. J'ai écrit du code dans Javascipt mais pour une raison quelconque, il ne passe pas par la dernière question où il devrait s'arrêter. Toute aide sera appréciée sur la raison pour laquelle la suivante ne va pas à la dernière question.

var question = document.querySelectorAll('.question');
var next = document.getElementById("next");

next.addEventListener("click", function() {
  var question = document.querySelectorAll(".question");

  for (var i = 0; i < question.length; i++) {
    if (question[i].style.display != "none") {
      question[i].style.display = "none";
      //resets to original questions
      if (i == question.length - 1) {
        question[0].style.display = "block";
      } else {
        question[i + 1].style.display = "block";
      }
      break;
    }
  }
});
.question {
  margin: 50px;
  width: 300px;
  height: 300px;
  border-radius: 10px;
  padding: 50px;
  text-align: center;
  color: white;
  background: #333;
  position: relative;
  display: none;
}

.visible {
  display: block;
}

.q-input,
.move {
  margin: 10px;
  border: none;
  padding: 10px;
}

.move {
  display: flex;
  justify-content: space-between;
}

.move button {
  padding: 5px;
  font-size: 16px;
  width: 60px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  transition: 0.4s;
}

.move button:hover {
  box-shadow: -2px -2px 20px #fff;
}

.move button:focus {
  outline: none;
}
<div class="question visible">
  <h1>Question <span class="one">1</span></h1>
  <p>What is your Name</p>
  <input type='text' class="q-input">
  <div class="move">
    <button id="prev">Prev</button>
    <button id="next">Next</button>
  </div>
</div>
<div class="question">
  <h1>Question 2</h1>
  <p>What is your Age</p>
  <input type="text" class="q-input">
  <div class="move">
    <button id="prev">Prev</button>
    <button id="next">Next</button>
  </div>
</div>
<div class="question">
  <h1>Question 3</h1>
  <p>What is your Sex</p>
  <input type="text" class="q-input">
  <div class="move">
    <button id="prev">Prev</button>
    <button id="next">Next</button>
  </div>
</div>
2
stronghold051 28 août 2020 à 12:30

2 réponses

Meilleure réponse

Vous utilisez document.getElementById("next") qui ne renvoie que le premier bouton avec l'ID suivant, donc seul ce bouton reçoit l'écouteur de clics qui lui est ajouté.

Les identifiants sont censés être juste un élément unique, vous devriez donc utiliser la classe à la place - changez-le en <button class="next">Next</button>


Dans votre JS, vous devez sélectionner tous ces éléments de bouton suivants et utiliser forEach pour ajouter un écouteur à chacun d'eux.

Ensuite, dans cet auditeur, vous pouvez afficher / masquer les divs de questions connectées en utilisant parentElement et nextElementSibling, et vérifier que l'élément suivant est une question avant de modifier les visibilités.

L'ajout / la suppression de la classe visible est également plus simple et plus facile à déboguer que d'essayer de modifier manuellement la propriété de style.


Tous ensemble, ça ressemble à:

var nextButtons = document.querySelectorAll('.next');

nextButtons.forEach(nextButton =>
  nextButton.addEventListener("click", function() {
    var currentQuestion = nextButton.parentElement.parentElement;
    var nextElement = currentQuestion.nextElementSibling;
    if (nextElement.classList.contains("question")) {
      nextElement.classList.add("visible");
      currentQuestion.classList.remove("visible");
    }
  }));
.question {
  margin: 50px;
  width: 300px;
  height: 300px;
  border-radius: 10px;
  padding: 50px;
  text-align: center;
  color: white;
  background: #333;
  position: relative;
  display: none;
}

.visible {
  display: block;
}

.q-input,
.move {
  margin: 10px;
  border: none;
  padding: 10px;
}

.move {
  display: flex;
  justify-content: space-between;
}

.move button {
  padding: 5px;
  font-size: 16px;
  width: 60px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  transition: 0.4s;
}

.move button:hover {
  box-shadow: -2px -2px 20px #fff;
}

.move button:focus {
  outline: none;
}
<div class="question visible">
  <h1>Question <span class="one">1</span></h1>
  <p>What is your Name</p>
  <input type='text' class="q-input">
  <div class="move">
    <button class="prev">Prev</button>
    <button class="next">Next</button>
  </div>
</div>
<div class="question">
  <h1>Question 2</h1>
  <p>What is your Age</p>
  <input type="text" class="q-input">
  <div class="move">
    <button class="prev">Prev</button>
    <button class="next">Next</button>
  </div>
</div>
<div class="question">
  <h1>Question 3</h1>
  <p>What is your Sex</p>
  <input type="text" class="q-input">
  <div class="move">
    <button class="prev">Prev</button>
    <button class="next">Next</button>
  </div>
</div>
2
Luke Storry 28 août 2020 à 10:51

Il n'est pas possible que plus d'un élément ait le même identifiant (bouton suivant + précédent), donc changé en class='next' ou utiliser des identifiants uniques. Vous avez besoin de forEach de votre bouton un eventListener. Vous pouvez utiliser forEach pour itérer dessus.

var question = document.querySelectorAll('.question');
var next = document.querySelectorAll(".next");

next.forEach(n => {n.addEventListener("click", function() {
  var question = document.querySelectorAll(".question");

  for (var i = 0; i < question.length; i++) {
    if (question[i].style.display != "none") {
      question[i].style.display = "none";
      //resets to original questions
      if (i == question.length - 1) {
        question[0].style.display = "block";
      } else {
        question[i + 1].style.display = "block";
      }
      break;
    }
  }
})});
.question {
  margin: 50px;
  width: 300px;
  height: 300px;
  border-radius: 10px;
  padding: 50px;
  text-align: center;
  color: white;
  background: #333;
  position: relative;
  display: none;
}

.visible {
  display: block;
}

.q-input,
.move {
  margin: 10px;
  border: none;
  padding: 10px;
}

.move {
  display: flex;
  justify-content: space-between;
}

.move button {
  padding: 5px;
  font-size: 16px;
  width: 60px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  transition: 0.4s;
}

.move button:hover {
  box-shadow: -2px -2px 20px #fff;
}

.move button:focus {
  outline: none;
}
<div class="question visible">
  <h1>Question <span class="one">1</span></h1>
  <p>What is your Name</p>
  <input type='text' class="q-input">
  <div class="move">
    <button id="prev1">Prev</button>
    <button class="next" id="next1">Next</button>
  </div>
</div>
<div class="question">
  <h1>Question 2</h1>
  <p>What is your Age</p>
  <input type="text" class="q-input">
  <div class="move">
    <button id="prev2">Prev</button>
    <button class="next" id="next2">Next</button>
  </div>
</div>
<div class="question">
  <h1>Question 3</h1>
  <p>What is your Sex</p>
  <input type="text" class="q-input">
  <div class="move">
    <button id="prev3">Prev</button>
    <button class="next" id="next3">Next</button>
  </div>
</div>
0
Sascha 28 août 2020 à 09:51