title: How to change text of button before progressing to next page?
body: <p>I am working on a quiz and need some help getting a task to perform correctly. If a user submits a wrong answer they will be shown their result and the correct answer to the question. When that happens, I would like for my 'submit answer' button to say 'next question' and then progress the user onto the next question. How can I write a function that would perform this task?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let score = 0;
      let currentQuestion = 0;
      let questions = [{
          title: "At what age was Harry Potter when he received his Hogwarts letter?",
          answers: ['7', '10', '11', '13'],
          correct: 1
        },
        {
          title: "Which is not a Hogwarts house?",
          answers: ['Dunder Mifflin', 'Ravenclaw', 'Slytherin', 'Gryffindor'],
          correct: 0
        },
        {
          title: "Who teaches Transfiguration at Hogwarts?",
          answers: ['Rubeus Hagrid', 'Albus Dumbledore', 'Severus Snape', 'Minerva McGonnagle'],
          correct: 3
        },
        {
          title: "Where is Hogwarts School for Witchcraft and Wizardry located?",
          answers: ['France', 'USA', 'UK', 'New Zealand'],
          correct: 2
        },
        {
          title: "What form does Harry Potter's patronus charm take?",
          answers: ['Stag', 'Eagle', 'Bear', 'Dragon'],
          correct: 0
        },
        {
          title: "What type of animal is Harry's pet?",
          answers: ['Dog', 'Owl', 'Cat', 'Snake'],
          correct: 1
        },
        {
          title: "Who is not a member of the Order of the Phoenix?",
          answers: ['Remus Lupin', 'Siruis Black', 'Lucious Malfoy', 'Severus Snape'],
          correct: 2
        },
        {
          title: "What is not a piece of the Deathly Hallows?",
          answers: ['Elder Wand', 'Cloak of Invisibility', 'Resurrection Stone', 'Sword of Gryffindor'],
          correct: 3
        },
        {
          title: "In which house is Harry sorted into after arriving at Hogwarts?",
          answers: ['Slytherin', 'Ravenclaw', 'Gryffindor', 'Hufflepuff'],
          correct: 2
        },
        {
          title: "What prevented Voldemort from being able to kill Harry Potter when he was a baby?",
          answers: ['Love', 'Anger', 'Friendship', 'Joy'],
          correct: 0
        },
      ];
  
  
  
      $(document).ready(function() {
  
        $('.start a').click(function(e) {
          e.preventDefault();
          $('.start').hide();
          $('.quiz').show();
          showQuestion();
        });
  
        $('.quiz ul').on('click', 'li', function() {
          $('.selected').removeClass('selected');
          $(this).addClass('selected');
        });
  
        $('.quiz a').click(function(e) {
          e.preventDefault();
          if ($('li.selected').length) {
            let guess = parseInt($('li.selected').attr('id'));
            checkAnswer(guess);
          } else {
            alert('Please select an answer');
          }
        });
  
        $('.summary a').click(function(e) {
          e.preventDefault();
          restartQuiz();
        });
  
      });
  
      function showQuestion() {
        let question = questions[currentQuestion];
        $('.quiz h2').text(question.title);
        $('.quiz ul').html('');
        for (var i = 0; i &lt; question.answers.length; i++) {
          $('.quiz ul').append(`&lt;li id="${i}"&gt;${question.answers[i]}&lt;/li&gt;`);
        }
        showProgress();
      }
  
      function showIncorrectQuestion(guess) {
          let question = questions[currentQuestion];
          $('.quiz h2').text(question.title);
          $('.quiz ul').html('');
          for (var i = 0; i &lt; question.answers.length; i++) {
              let cls = i === question.correct ? "selected" : guess === i ? "wrong" : ""
              $('.quiz ul').append(`&lt;li id="${i}" class="${cls}"&gt;${question.answers[i]}&lt;/li&gt;`);
          }
          showProgress();
      }
  
      function checkAnswer(guess) {
          let question = questions[currentQuestion];
          if (question.correct === guess) {
              if (!question.alreadyAnswered) {
                score++;
              }
              showIsCorrect(true);
              currentQuestion++;
              if (currentQuestion &gt;= questions.length) {
                  showSummary();
              } else {
                  showQuestion();
              }
          } else {
              showIsCorrect(false);
              showIncorrectQuestion(guess);
          }
          question.alreadyAnswered = true;
      }
  
      function showSummary() {
        $('.quiz').hide();
        $('.summary').show();
        $('.summary p').text("Thank you for taking the quiz! Here's how you scored. You answered " + score + " out of " + questions.length + " correctly! Care to try again?")
      }
  
      function restartQuiz() {
        questions.forEach(q =&gt; q.alreadyAnswered = false);
        
        $('.summary').hide();
        $('.quiz').show();
        score = 0;
        currentQuestion = 0;
        showQuestion();
      }
  
      function showProgress() {
        $('#currentQuestion').html(currentQuestion + " out of " + questions.length);
      }
  
      function showIsCorrect(isCorrect) {
        var result = "Wrong";
        if (isCorrect) {
          result = "Correct";
        }
        $('#isCorrect').html(result);
      }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    text-decoration: none;
    text-align: center;
    background-color: #837F73;
  }
  
  h1 {
    font-family: 'Poor Story', cursive;
    background-color: #950002;
    padding: 60px;
    color: #FFAB0D;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
  }
  
  h2 {
    font-family: 'Poor Story', cursive;
    font-size: 30px;
    padding: 60px;
    background-color: #950002;
    color: #FFAB0D;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
  }
  
  p {
   font-family: 'Poor Story', cursive;
    background-color: #FFAB0D;
    font-size: 20px;
    font-weight: bold;
  
  }
  
  a {
    border: 1px solid #222F5B;
    padding: 10px;
    background-color: #222F5B;
    color: silver;
    border-radius: 5px;
    margin-top: 50px;
    display: inline-block;
  }
  
  a:hover {
    border: 1px solid #000000;
    background-color: #000000;
    color: #FCBF2B;
  }
  
  .quiz li {
    cursor: pointer;
    border: 1px solid;
    display: inline-block;
    width: 200px;
    margin: 10px;
    font-family: 'Poor Story', cursive;
    font-size: 26px;
  }
  
  #currentQuestion {
    color: #000000;
    font-size: 18px;
    font-family: 'Poor Story', cursive;
    margin-top: 10px;
  
  }
  
  #isCorrect {
    color: white;
    font-family: 'Poor Story', cursive;
    font-weight: bold;
    font-size: 18px;
  
  }
  
  .quiz, .summary {
        display: none;
      }
      
      .quiz ul {
        margin-top: 20px;
        list-style: none;
        padding: 0;
      }
      
      .selected {
        background-color: #398C3F;
      }
  
  .wrong {
      background-color: red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;link href="https://fonts.googleapis.com/css?family=Poor+Story" rel="stylesheet"&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width"&gt;
    &lt;title&gt;JS Bin&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  
    &lt;div class="start"&gt;
      &lt;h1&gt;How Well Do You Know Harry Potter?&lt;/h1&gt;
      &lt;a href="#"&gt;Start Quiz&lt;/a&gt;
    &lt;/div&gt;
  
  
    &lt;div class="quiz"&gt;
      &lt;h2&gt;Question Title&lt;/h2&gt;
      &lt;ul&gt;
        &lt;li&gt;Choice&lt;/li&gt;
        &lt;li&gt;Choice&lt;/li&gt;
        &lt;li&gt;Choice&lt;/li&gt;
        &lt;li&gt;Choice&lt;/li&gt;
      &lt;/ul&gt;
      &lt;a href="#"&gt;Submit Answer&lt;/a&gt;
      &lt;div id="currentQuestion"&gt;&lt;/div&gt;
      &lt;div id="isCorrect"&gt;&lt;/div&gt;
    &lt;/div&gt;
  
  
    &lt;div class="summary"&gt;
      &lt;h2&gt;Results&lt;/h2&gt;
      &lt;p&gt;Thank you for taking the quiz! Here's how you scored. You answered x out of y correctly! Care to try again?&lt;/p&gt;
      &lt;a href="#"&gt;Retake Quiz&lt;/a&gt;
    &lt;/div&gt;
  
    &lt;script src="https://code.jquery.com/jquery-3.1.0.js"&gt;&lt;/script&gt;
    
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>