Поменять текст кнопки на последнем тесте

Question

У меня не выходит поменять название кнопки так, чтобы на последнем тесте она называлась "Посмотреть результаты", а у меня выводит только название из HTML файла. Я пыталась как-то скрыть кнопку, или сравнением (currentQuiz == quizData.length) вывести её, но пока ничего не вышло

Моя реализация была такой:

<div class="quiz-container" id="quiz">
                  <div class="progress">
                    <div class="progress-bar" role="progressbar"></div>
                  </div>
                    <div class="quiz-header">
                    <h2 id="question">Question Text</h2>
                    <ul>
                        <li>
                        <input type="radio" name="answer" id="a" class="answer">
                          <label for="a" id="a_text">Answer</label>
                        </li>
                        <li>
                          <input type="radio" name="answer" id="b" class="answer">
                          <label for="b" id="b_text">Answer</label>
                        </li>
                        <li>
                          <input type="radio" name="answer" id="c" class="answer">
                          <label for="c" id="c_text">Answer</label>
                        </li>
                        <li>
                          <input type="radio" name="answer" id="d" class="answer">
                          <label for="d" id="d_text">Answer</label>
                        </li>
                      </ul>
                    </div>
                    <button id="submit" >Наступне питання</button>
                  </div>

submitBtn.addEventListener('click', () => {
    const answer = getSelected()
    if(answer) 
    {  
        currentQuiz++
        // Увеличивает процент прогресса при прохождении теста
        progress += 5;
        progressBar.style.width = `${progress}%`;

        if (currentQuiz < quizData.length) 
        {
        loadQuiz()
        } 
        else if (currentQuiz == quizData.length)
                {
                    document.getElementById('submit').hidden = true;
                    quiz.innerHTML = `<button onclick="showResult()"> Дивитися результат </button> `
                }
    }
})

Answer 1

Я честно говоря не разобрался в том что там должно происходить пока кнопка не заменена. К тому же там не весь код.

Тебе никакую кнопку создавать заново не надо. После того как закончится счетчик вопросов, нужно вызвать заранее реализованный переключатель. И далее, вероятно, вернуть снова в исходное положение.

Для примера будем просто переустанавливать checked, пока не закончится список, и переключимся. По клику на "Наступне питання", для простоты примера, снова все сбросим в исходное положение.

const allInput = [...document.querySelectorAll('li>input')]
const button = document.getElementById('submit')
let counter = 0
let handler = null // 'question' | 'result'

switchBtn(/* default */)

function question () {
  const item = allInput[counter++]
  item.checked = true
  if (counter === allInput.length) {
    counter = 0
    switchBtn('result')
  }
}

function result () {
  // Для примера мы просто все вернем на место
  switchBtn('question')
  allInput.forEach((rb) => rb.checked = false)
}

function switchBtn (h = 'question') {
  if (h === handler) return
  handler = h
  if (handler === 'question') {
    button.removeEventListener('click', result)
    button.addEventListener('click', question)
    button.textContent = 'Наступне питання'
  } else {
    button.removeEventListener('click', question)
    button.addEventListener('click', result)
    button.textContent = 'Дивитися результат'
  }
}

  <div class="quiz-container" id="quiz">
    <ul>
      <li>
        <input type="radio" name="answer" id="a" class="answer">
        <label for="a" id="a_text">Answer</label>
      </li>
      <li>
        <input type="radio" name="answer" id="b" class="answer">
        <label for="b" id="b_text">Answer</label>
      </li>
    </ul>
    <button id="submit">Наступне питання</button>
  </div>

БЛОГ НА HUSL

Поменять текст кнопки на последнем тесте

Ответы (1 шт):