What is the best way to reveal the following div while concealing the one before it?

Question

What is the best way to reveal the following div while concealing the one before it?

Just starting out with Javascript, I'm currently developing a quiz solution that utilizes divs and buttons to navigate through the questions. I've written some JavaScript code for this functionality but I'm encountering an issue where it doesn't progress to the final question as expected. Any assistance on why the next button doesn't lead to the last question would be greatly appreciated.

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";
      //restores 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>

javascript html css

Answer 1

Answer №1

Utilizing

 document.getElementById("next")

will only target the first button with an ID of next, resulting in only that specific button having the click listener attached to it.

Since IDs are intended for singular unique elements, it is advisable to use classes instead - by modifying it to

<button class="next">Next</button>

In your JavaScript code, you should select all the next button elements and utilize forEach to assign a listener to each of them.

Inside that listener, you can manipulate the visibility of connected question divs by employing parentElement and nextElementSibling, ensuring to verify if the next element is indeed a question before altering the visibilities.

Additionally, applying/eliminating the visible class is more organized and simpler for troubleshooting compared to directly editing the style property.

The consolidated code appears as follows:

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>

Answer 2

Utilizing

 document.getElementById("next")

will only target the first button with an ID of next, resulting in only that specific button having the click listener attached to it.

Since IDs are intended for singular unique elements, it is advisable to use classes instead - by modifying it to

<button class="next">Next</button>

In your JavaScript code, you should select all the next button elements and utilize forEach to assign a listener to each of them.

Inside that listener, you can manipulate the visibility of connected question divs by employing parentElement and nextElementSibling, ensuring to verify if the next element is indeed a question before altering the visibilities.

Additionally, applying/eliminating the visible class is more organized and simpler for troubleshooting compared to directly editing the style property.

The consolidated code appears as follows:

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>

Answer 3

Answer №2

It is important to ensure that each element has a unique identifier (ID) in HTML, as having more than one element with the same ID can cause issues. In this case, the IDs for the buttons have been changed to use classes instead of duplicate IDs. To add functionality to your buttons, you can utilize forEach method along with an eventListener to iterate over them and perform specific actions.

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>

Answer 4

It is important to ensure that each element has a unique identifier (ID) in HTML, as having more than one element with the same ID can cause issues. In this case, the IDs for the buttons have been changed to use classes instead of duplicate IDs. To add functionality to your buttons, you can utilize forEach method along with an eventListener to iterate over them and perform specific actions.

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>

What is the best way to reveal the following div while concealing the one before it?

Answer №1

Answer №2

Similar questions

What are the best practices for presenting Motion JPEG binary data streams using Angular, Ionic, and JavaScript?

Using a variable to contain a loop in Jquery

Angular: Struggling with Parent Component not recognizing changes in Child Component

Opening a browser tab discreetly and extracting valuable data from it

Is there a way to continue a failed fetch request?

CORS blocked in the live environment

What is the best way to eliminate an item from an array in JavaScript or AngularJS?

Discovering the tiniest value in every row within an HTML table with the help of PHP

Error: The specified schema for the model "superheroes" is missing and has not been registered. Please ensure the schema is properly defined and registered

What is the best way to extract a single image from JSON data using AngularJS?

Show drawer when modal is open in React Native

CSS for Responsive Web Development: Adjusting the Height of Mobile Sliders

Refreshing a page following an AJAX request made with jQuery

Display a text field upon clicking on a specific link

CSS: adjusting styles for different screen sizes on both desktop computers and smartphones

Creating a Click Counter with jQuery 2.0.1/2.0.2: A Step-by-Step Guide

The changes made to $scope in AngularJS are not being displayed in the view

Unable to grab hold of specific child element within parent DOM element

The command `browser.find_elements_by_class_name('foo')` returned zero results

jQuery doesn't seem to function properly upon initial click