Как по клику на кнопку переходить к следующему вопросу?

Question

[Smeecy Smeecy]

Как правильно при клике на кнопку "Вперед" увеличить значение переменной currentStep и соответственно переключить вопрос и ответы? Код:

HTML

<div class="quiz" id="quiz">
  <div class="quiz__step">
    <div class="quiz__question"></div>
    <div class="quiz__answers"></div>
  </div>
  <div class="quiz__controls">
    <button class="quiz__button_prev">Назад</button>
    <button class="quiz__button_next">Вперёд</button>
  </div>
</div>

JS

var stepOne = {
    question: "What is your legal base of stay?",
    answers: ["VISA", "Polish Recidence Card", "EU Recidence Card", "Other"]
}

var stepTwo = {
    question: "When will your legal stay expire?",
    answers: ["Less than 30 days", "From 1 to 3 months", "From 3 to 6 months", "Other"]
}

var stepThree = {
    question: "What is your ground for TRC application?",
    answers: ["Studies & Alumni", "Work contract", "Family reunification & kids", "Other"]
}

var steps = [stepOne, stepTwo, stepThree];

var currentStep = 0;

var quizQuestion = document.querySelector('.quiz__question');
var quizAnswers = document.querySelector('.quiz__answers');

var quizButtonNext = document.querySelector('.quiz__button_next');

function Quiz() {
    quizQuestion.innerHTML = steps[currentStep].question;

    for (let i = 0; i < steps[currentStep].answers.length; i++) {
        const answersItems = steps[currentStep].answers[i];

        const answersItemsElements = document.createElement('li');
        answersItemsElements.classList.add('quiz__answer');
        answersItemsElements.innerHTML = answersItems;

        quizAnswers.appendChild(answersItemsElements);
    }
}

Quiz();

Answer 1

[0xD34F]

const steps = [ /* ... */ ];
let currentStep = 0;

const quizQuestion = document.querySelector('.quiz__question');
const quizAnswers = document.querySelector('.quiz__answers');

const prevBtn = document.querySelector('.quiz__button_prev');
const nextBtn = document.querySelector('.quiz__button_next');

prevBtn.addEventListener('click', () => nextStep(-1));
nextBtn.addEventListener('click', () => nextStep(+1));

function nextStep(stepChange) {
  currentStep = Math.max(0, Math.min(steps.length - 1, currentStep + stepChange));

  prevBtn.disabled = currentStep === 0;
  nextBtn.disabled = currentStep === steps.length - 1;
  
  quizQuestion.innerHTML = steps[currentStep].question;
  quizAnswers.innerHTML = steps[currentStep].answers.map(n => `<li>${n}</li>`).join('');
}

nextStep(0);

Comments

[Smeecy Smeecy]

Круто, спасибо