javascript - Rest button at the end of the quiz is not functioning

Question

When the user gets to the end of this quiz a reset button is present. I have tried everything I can find to make the reset button work. I've added it to the top, I've wrapped in a form tag as well and tried "reset form". I'm a novice, so I would appreciate knowing what I may be doing wrong and if this is even a possibility with my current formatting.

Full code below.

var currentTab = 0; // Current tab is set to be the first tab (0)

showTab(currentTab); // Display the current tab

// Displays the specified tab of the form
function showTab(n) {
  var x = document.getElementsByClassName('tab');
  x[n].style.display = 'block';

  // Fix the Previous button
  if (n == 0) {
    document.getElementById('prevBtn').style.display = 'none';
  } else {
    document.getElementById('prevBtn').style.display = 'inline';
  }

  // Fix the Next button
  if (n == (x.length - 1)) {
    document.getElementById('nextBtn').innerHTML = 'restart';
  } else {
    document.getElementById('nextBtn').innerHTML = 'Next';
  }

  // Run a function that will display the correct step indicator
  fixStepIndicator(n)
}

// Figures out which tab to display
function nextPrev(n) {
  var x = document.getElementsByClassName('tab');

  // Exit the function if any field in the current tab is invalid
  if (n == 1 && !validateForm()) return false;

  // Hide the current tab
  x[currentTab].style.display = 'none';

  // Increase or decrease the current tab by 1
  currentTab = currentTab + n;

  // if you have reached the end of the form...
  if (currentTab >= x.length) {
    // ... the form gets restarted:
    document.getElementById('regForm').restart();
    return false;
  }

  // Otherwise, display the correct tab:
  showTab(currentTab);
}

// Validates the form fields
function validateForm() {
  var x, y, i, valid = true;
  x = document.getElementsByClassName('tab');
  y = x[currentTab].getElementsByTagName('input');

  // Checks every input field in the current tab:
  for (i = 0; i < y.length; i++) {
    // If a field is empty...
    if (y[i].value == '') {
      // add an "invalid" class to the field
      y[i].className += ' invalid';
      // and set the current valid status to false
      valid = false;
    }
  }

  // If the valid status is true, mark the step as finished and valid:
  if (valid) {
    document.getElementsByClassName('step')[currentTab].className += ' finish';
  }
  return valid; // return the valid status
}

// Removes the "active" class of all steps
function fixStepIndicator(n) {
  var i, x = document.getElementsByClassName('step');
  for (i = 0; i < x.length; i++) {
    x[i].className = x[i].className.replace(' active', '');
  }
  //... and add the "active" class on the current step
  x[n].className += ' active';
}

function yesnoCheck() {
  if (document.getElementById('yesCheck').checked) {
    document.getElementById('ifYes').style.display = 'block';
  } else {
    document.getElementById('ifYes').style.display = 'none';
  }

  if (document.getElementById('noCheck').checked) {
    document.getElementById('ifNo').style.display = 'block';
  } else {
    document.getElementById('ifNo').style.display = 'none';
  }
}

function yesno1Check() {
  if (document.getElementById('yes1Check').checked) {
    document.getElementById('ifYes1').style.display = 'block';
  } else {
    document.getElementById('ifYes1').style.display = 'none';
  }

  if (document.getElementById('no1Check').checked) {
    document.getElementById('ifNo1').style.display = 'block';
  } else {
    document.getElementById('ifNo1').style.display = 'none';
  }
}

* {
  box-sizing: border-box;
}

body {
  background-color: #f1f1f1;
  padding-bottom: 5rem;
}

#regForm {
  background-color: #ffffff;
  margin: 50px auto;
  font-family: calibri;
  font-size: 17px
  padding: 40px;
  width: 30%;
  min-width: 300px;
}

h1 {
  text-align: center;
}

input {
  padding: 10px;
  width: 100%;
  font-size: 17px;
  font-family: Raleway;
  border: 1px solid #aaaaaa;
}

/* Mark input boxes that gets an error on validation: */
input.invalid {
  background-color: #ffdddd;
}

/* Hide all steps by default: */
.tab {
  display: none;
}

button {
  background-color: #0000ff;
  color: #ffffff;
  border: none;
  padding: 10px 20px;
  font-size: 17px;
  font-family: Raleway;
  cursor: pointer;
}

button:hover {
  opacity: 0.8;
}

#prevBtn {
  background-color: #bbbbbb;
}

/* Make circles that indicate the steps of the form: */
.step {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbbbbb;
  border: none;
  border-radius: 50%;
  display: inline-block;
  opacity: 0.5;
}

.step.active {
  opacity: 1;
}

/* Mark the steps that are finished and valid: */
.step.finish {
  background-color: #0000ff;
}

<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet" />

<span style="font-family: calibri; font-size: 12pt;">
  <form id="regForm" style="float: left;">
    <h1 style="text-align: left;">Voicemail Troubleshooting</h1>

    <!-- One "tab" for each step in the form: -->
    <div class="tab">
      Is the accurate SKU on the LOS?<br /><br />
      Yes <input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="yesCheck">
      No <input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="noCheck"><br />
    </div>

    <div class="tab">
      Tab 2
      <div id="ifNo" style="display: none">
        Result of selecting No to first question
      </div>
      <div id="ifYes" style="display: none"><br /><br />
        Can the customer call the VM from their phone?<br /><br />
        Yes <input type="radio" onclick="javascript:yesno1Check();" name="yesno1" id="yes1Check">
        No <input type="radio" onclick="javascript:yesno1Check();" name="yesno1" id="no1Check"><br />
      </div>
    </div>

    <div class="tab">
      Tab 3
      <div id="ifYes1" style="display:none"><br />
        Result of selecting Yes to second question.
      </div>
      <div id="ifNo1" style="display:none">
        Result of selecting No to second question</div>
      </div>
      <div style="overflow: auto;">
        <div style="float: right;">
        <br /><br />
        <button type="button" id="prevBtn" onclick="nextPrev(-1)">Previous</button>
        <button type="button" id="nextBtn" onclick="nextPrev(1)">Next</button>
      </div>
    </div>

    <!-- Circles which indicates the steps of the form: -->
    <div style="text-align: center; margin-top: 40px;">
      <span class="step"></span>
      <span class="step"></span>
      <span class="step"></span>
      <span class="step"></span>
    </div>
  </form>
</span>

question from:https://stackoverflow.com/questions/65617423/rest-button-at-the-end-of-the-quiz-is-not-functioning

Answer 1

I think it what you want -

<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet" />
<style>
* {
box-sizing: border-box;
}
body {
background-color: #f1f1f1;
}
#regForm {
background-color: #ffffff;
margin: 50px auto;
font-family: calibri;
font-size: 17px
padding: 40px;
width: 30%;
min-width: 300px;
}
h1 {
text-align: center;
}
input {
padding: 10px;
width: 100%;
font-size: 17px;
font-family: Raleway;
border: 1px solid #aaaaaa;
}
/* Mark input boxes that gets an error on validation: */
input.invalid {
background-color: #ffdddd;
}
/* Hide all steps by default: */
.tab {
display: none;
}
button {
background-color: #0000ff;
color: #ffffff;
border: none;
padding: 10px 20px;
font-size: 17px;
font-family: Raleway;
cursor: pointer;
}
button:hover {
opacity: 0.8;
}
#prevBtn {
background-color: #bbbbbb;
}
/* Make circles that indicate the steps of the form: */
.step {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbbbbb;
border: none;
border-radius: 50%;
display: inline-block;
opacity: 0.5;
}
.step.active {
opacity: 1;
}
/* Mark the steps that are finished and valid: */
.step.finish {
background-color: #0000ff;
}
</style>
<span style="font-family: calibri; font-size: 12pt;">
<form id="regForm" style="float: left;">
     <h1 style="text-align: left;">Voicemail Troubleshooting</h1>
     <!-- One "tab" for each step in the form: -->
     <div class="tab">
     Is the accurate SKU on the LOS?<br />
     <br />
     Yes <input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="yesCheck">
     No <input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="noCheck"><br />
     </div>
     <div class="tab">Tab 2
     <div id="ifNo" style="display:none">
     Result of selecting No to first question
     </div>
     <div id="ifYes" style="display:none"><br />
     <br />
     Can the customer call the VM from their phone?<br />
     <br />
     Yes <input type="radio" onclick="javascript:yesno1Check();" name="yesno1" id="yes1Check">
     No <input type="radio" onclick="javascript:yesno1Check();" name="yesno1" id="no1Check"><br />
     </div>
     </div>
     <div class="tab">Tab 3
     <div id="ifYes1" style="display:none"><br />
     Result of selecting Yes to second question.</div>
     <div id="ifNo1" style="display:none">
     Result of selecting No to second question</div>
     </div>
     <div style="overflow: auto;">
     <div style="float: right;">
     <br />
     <br />
     <button type="button" id="prevBtn" onclick="nextPrev(-1)">Previous</button>
     <button type="button" id="nextBtn" onclick="nextPrev(1)">Next</button>
     </div>
     </div>
     <!-- Circles which indicates the steps of the form: -->
     <div style="text-align: center; margin-top: 40px;">
     <span class="step"></span>
     <span class="step"></span>
     <span class="step"></span>
     <span class="step"></span>
     </div>
</form>
</span>
<script>
var currentTab = 0; // Current tab is set to be the first tab (0)
showTab(currentTab); // Display the current tab
function showTab(n) {
                         // This function will display the specified tab of the form...
                         var x = document.getElementsByClassName("tab");
                         x[n].style.display = "block";
                         //... and fix the Previous/Next buttons:
                         if (n == 0) {
                           document.getElementById("prevBtn").style.display = "none";
                         } else {
                           document.getElementById("prevBtn").style.display = "inline";
                         }
                         if (n == (x.length - 1)) {
                           document.getElementById("nextBtn").innerHTML = "restart";
                           document.getElementById("nextBtn").setAttribute('onclick', 'restart()');
                         } else {
                           document.getElementById("nextBtn").innerHTML = "Next";
                         }
                         //... and run a function that will display the correct step indicator:
                         fixStepIndicator(n);
}

/* Restart function */
function restart(){
  var x = document.getElementsByClassName("tab");
  x[x.length - 1].style.display = "none";
  document.getElementById("nextBtn").setAttribute('onclick', 'nextPrev(1)');
    window.currentTab = 0; // Current tab is set to be the first tab (0)
    showTab(window.currentTab); // Display the current tab
}

function nextPrev(n) {
                         // This function will figure out which tab to display
                         var x = document.getElementsByClassName("tab");
                         // Exit the function if any field in the current tab is invalid:
                         if (n == 1 && !validateForm()) return false;
                         // Hide the current tab:
                         x[currentTab].style.display = "none";
                         // Increase or decrease the current tab by 1:
                         currentTab = currentTab + n;
                         // if you have reached the end of the form...
                         if (currentTab >= x.length) {
                           // ... the form gets restarted:
                           document.getElementById("regForm").restart();
                           return false;
                         }
                         // Otherwise, display the correct tab:
                         showTab(currentTab);
}
function validateForm() {
                         // This function deals with validation of the form fields
                         var x, y, i, valid = true;
                         x = document.getElementsByClassName("tab");
                         y = x[currentTab].getElementsByTagName("input");
                         // A loop that checks every input field in the current tab:
                         for (i = 0; i < y.length; i++) {
                           // If a field is empty...
                           if (y[i].value == "") {
                             // add an "invalid" class to the field:
                             y[i].className += " invalid";
                             // and set the current valid status to false
                             valid = false;
                           }
                         }
                         // If the valid status is true, mark the step as finished and valid:
                         if (valid) {
                           document.getElementsByClassName("step")[currentTab].className += " finish";
                         }
                         return valid; // return the valid status
}
function fixStepIndicator(n) {
                         // This function removes the "active" class of all steps...
                         var i, x = document.getElementsByClassName("step");
                         for (i = 0; i < x.length; i++) {
                           x[i].className = x[i].className.replace(" active", "");
                         }
                         //... and adds the "active" class on the current step:
                         x[n].className += " active";
}
</script><script>
function yesnoCheck() {
                                                                                                                        if (document.getElementById('yesCheck').checked) {
                                                                                                                            document.getElementById('ifYes').style.display= 'block';
                                                                                                                        }
                                                                                                                        else document.getElementById('ifYes').style.display= 'none';
                                                                                                                if (document.getElementById('noCheck').checked) {
                                                                                                                            document.getElementById('ifNo').style.display= 'block';
                                                                                                                        }
                                                                                                                        else document.getElementById('ifNo').style.display= 'none';
}</script><script>
function yesno1Check() {
                                                                                                                        if (document.getElementById('yes1Check').checked) {
                                                                                                                            document.getElementById('ifYes1').style.display= 'block';
                                                                                                                        }
                                                                                                                        else document.getElementById('ifYes1').style.display= 'none';
                                                                                                                if (document.getElementById('no1Check').checked) {
                                                                                                                            document.getElementById('ifNo1').style.display= 'block';
                                                                                                                        }
                                                                                                                        else document.getElementById('ifNo1').style.display= 'none';
}
});</script>

Working fiddle - jsfiddle link