I have the code

<div >
    <input type="checkbox"  id="0" name="happy" value="yes">
    <label for="0"></label>
</div>
<div >
    <input type="checkbox"  id="0" name="happy" value="yes">
    <label for="0"></label>
</div>
<div >
    <input type="checkbox"  id="0" name="happy" value="yes">
    <label for="0"></label>
</div>

<button type="button" >Next</button>

how to implement switching between them sequentially so that when you click on the button, hidden is removed from the questions?

CodePudding user response：

Something like this, you can store the "current answer" index in a variable, and then increment it everytime the button gets clicked:

const btn = document.querySelector('.next_button')

var currAnswer = 0;

btn.addEventListener('click', function(e) {
  
  const answers = document.querySelectorAll('.answer')
  answers.forEach( function(el, i) {
    if (!el.classList.contains('hidden')) {
      el.classList.add('hidden')
    }
  })
  answers[currAnswer].classList.remove('hidden')
  
  currAnswer  
  if (currAnswer >= answers.length) {
    currAnswer = 0
  } 
})

.hidden {
  display: none;
}

<div >
    <input type="checkbox"  id="0" name="happy" value="yes">
    <label for="0">0</label>
</div>
<div >
    <input type="checkbox"  id="1" name="happy" value="yes">
    <label for="1">1</label>
</div>
<div >
    <input type="checkbox"  id="2" name="happy" value="yes">
    <label for="2">2</label>
</div>

<button type="button" >Next</button>

CodePudding user response：

Based on your original edit:

Add a data attribute to each div, and use that in your click handler to determine which div to hide, and which div to show next.

// Cache the elements
const divs = document.querySelectorAll('.question');
const button = document.querySelector('.next');

// The handler return a function that is called
// when the click event occurs
button.addEventListener('click', handleClick(), false);

// Use the id to target the div with that id
// and toggle the hidden class
function toggle(id) {
  const selector = `[data-id="${id}"]`;
  const question = document.querySelector(selector);
  question.classList.toggle('hidden');
}

// Initialise the id to 0
function handleClick(id = 0) {
  return function () {
    
    // If the id is less than the
    // number of questions hide the current div
    // increase the id, then show that div
    if (id < divs.length) {
      if (id > 0) toggle(id);
        id;
      toggle(id);
    }
  }
}

.next { margin-bottom: 1em; }
.hidden { display: none; }

<button type="button" >Next</button>

<div data-id="1" >Question 1</div>
<div data-id="2" >Question 2</div>
<div data-id="3" >Question 3</div>
<div data-id="4" >Question 4</div>

CodePudding user response：

Here is the final and clean working code that switches between the divs of your questions to show one at a time. All the best!

CSS goes here:

  .hidden {
    display: none;
  }

HTML goes here:

 <div >
   <input
    type="checkbox"
    
    id="0"
    name="happy"
    value="yes"
   />
  <label for="0">Question 1</label>
</div>
<div >
  <input
    type="checkbox"
    
    id="0"
    name="happy"
    value="yes"
  />
  <label for="0">Question 2</label>
</div>
<div >
  <input
    type="checkbox"
    
    id="0"
    name="happy"
    value="yes"
  />
  <label for="0">Question 3</label>
</div>

JavaScript goes here:

// track the next and current element
let nextIndex = 0;
let currentIndex = 0;

// get the button
const btn = document.querySelector(".next_button");
//add click event that fires the nextFunc function below
btn.addEventListener("click", nextFunc);
//get all elements with class hidden
const hidden = document.querySelectorAll(".hidden");

// next function
function nextFunc() {
  //increase the next element by 1  and go back to zero if got to an end
  nextIndex  ;
  if (nextIndex >= hidden.length) {
    nextIndex = 0;
  }

  //get the next and current element
  const nextElement = hidden[nextIndex];
  const currentElement = hidden[currentIndex];

  //show the next and hide the current
  nextElement.classList.remove("hidden");
  currentElement.classList.add("hidden");

  //increment the current element to be the next element and and reset if above
  currentIndex  ;
  if (currentIndex >= hidden.length) {
    currentIndex = 0;
  }
}

//show the first question at first
hidden[currentIndex].classList.remove("hidden");