I have a classlist:

const answers = document.querySelectorAll('.answer')

and the next button using forEach:

nextButton.addEventListener('click', function(e) {
   nextAnswer();
}
const nextAnswer = () => {
    answers.forEach( function(el) {
        if (!el.classList.contains('hidden')) {
          el.classList.add('hidden')
          console.log(el)
        }
    })
    answers[currAnswer].classList.remove('hidden')
    currAnswer  
    if(currAnswer == 7) {
       nextButton.innerHTML = "Send"
       nextButton.className = "submit_button"

    }
}

here is the html:

<div >
    <div >
        <div data-id="0" id="picture" >
            <img src="C:\\Users\\User\\Desktop\\kviz\\Photo\\Question1\\i.jpg" width=250px height=250px>
        </div>
        <div data-id="1" id="picture" >
            <img src="C:\\Users\\User\\Desktop\\kviz\\Photo\\Question1\\i1.jpg" width=250px height=250px>
        </div>
        <div data-id="2" id="picture" >
            <img src="C:\\Users\\User\\Desktop\\kviz\\Photo\\Question1\\i2.jpg" width=250px height=250px>
        </div>
    </div>
</div>
<div >
    <input type="text"  placeholder="Введите адрес">
    <div ></div>
</div>
<div >
    <div >
        <input type="checkbox"  id="0" name="happy" value="yes">
        <label for="0">5</label>
        <input type="checkbox"  id="1" name="happy" value="yes">
        <label for="1">30</label>
        <input type="checkbox"  id="2" name="happy" value="yes">
        <label for="2">60</label>
        <input type="checkbox"  id="3" name="happy" value="yes">
        <label for="3">80</label>
    </div>
</div>

how can I make a back button ? I tried to implement it but couldn't "He asks for clarification but I do not know what to add"

CodePudding user response：

If you're not using a UI framework (e.g. React) and just going with plain JS, I'd handle it this way (with a dedicated function for reconciling the UI state):

Also note that I'm using a dedicated button for each action (and hiding/disabling them as appropriate), rather than reusing buttons.

let currAnswer = 0;

const answers = document.querySelectorAll('.answer');
const btnPrev = document.querySelector('button.button_previous');
const btnNext = document.querySelector('button.button_next');
const btnSubmit = document.querySelector('button.button_submit');

btnPrev.addEventListener('click', () => {
  if (currAnswer > 0) currAnswer -= 1;
  updateUI();
});

btnNext.addEventListener('click', () => {
  if (currAnswer < answers.length) currAnswer  = 1;
  updateUI();
});

function updateUI () {
  for (const elm of answers) elm.classList.add('hidden');
  answers[currAnswer]?.classList.remove('hidden');

  btnPrev.disabled = currAnswer === 0;

  if (currAnswer === answers.length) {
    btnNext.classList.add('hidden');
    btnSubmit.classList.remove('hidden');
  }
  else {
    btnNext.classList.remove('hidden');
    btnSubmit.classList.add('hidden');
  }
}

// Initialize the UI state
updateUI();

.hidden { display: none; }

<div >answer 1</div>
<div >answer 2</div>
<div >answer 3</div>
<div >answer 4</div>
<div >answer 5</div>
<div >answer 6</div>
<div >answer 7</div>

<div>
  <button >previous</button>
  <button >next</button>
  <button >send</button>
</div>

CodePudding user response：

You can just add a button that decrements the answer index when it is clicked, similar to what is being done in the event handler for the next button.

nextButton.addEventListener('click', function(e) {
    switchAnswer();
      currAnswer;
    if(currAnswer == 7) {
        nextButton.innerHTML = "Send";
        nextButton.className = "submit_button";
    }
}
// You need to query for this button from the DOM and assign it to this variable
prevButton.addEventListener('click', function(e) {
    if(currAnswer == 7) {
        // reset next button text...
    }
    if(currAnswer > 0){
        --currAnswer;
        switchAnswer();
    }
});
const switchAnswer = () => {
    answers.forEach( function(el) {
        el.classList.add('hidden')
    })
    answers[currAnswer].classList.remove('hidden')
}