Search code examples
javascriptreset

Reset function in JS keeps reloading page


I have a reset function in my codes that is keeping my form on a reloading loop.

When I click on my Calculate Button, the divtext that I am trying to display just "Blink" and it will go off.

I only want it to reset when reset button is clicked though. Don't know where it went wrong. Here are my codes.

function calculateDate() {
  var startDate = document.getElementById("startDate").value;
  var endDate = document.getElementById("endDate").value;
  var dvtextless60 = document.getElementById("dvtextless60");
  var dvtext61182 = document.getElementById("dvtext61182");
  var dvtextmore183 = document.getElementById("dvtextmore183");
  var Difference_In_Time = new Date(endDate).getTime() - new Date(startDate).getTime();
  var Difference_In_Days = Difference_In_Time / (1000 * 3600 * 24);

  if (Difference_In_Days < 60){
    document.getElementById("dvtextless60").style.display = "block";
  } else if (Difference_In_Days > 60 && Difference_In_Days <= 182){
    document.getElementById("dvtext61182").style.display = "block";
  } else {
    document.getElementById("dvtextmore183").style.display = "block";
  }
  
  document.getElementById("daysCalculator").innerHTML = greeting;
}

function resetForm(){
  document.getElementById('rCalculator').reset();
}
<form id="rCalculator">
<pre>
Enter Start Date: <input type="date" name="startDate" id="startDate"/><br>

Enter End Date: <input type="date" name="endDate" id="endDate"/><br>

Total Days : <span id="daysCalculator"></span>

<div id="dvtextless60" style="display:none"> 
<span style="font-size:18px"><b>Too Short</b></span>
<br>

</div>

<div id="dvtext61182" style="display:none"> 
<span style="font-size:18px"><b>Almost There</b></span>

</div>

<div id="dvtextmore183" style="display:none"> 
<span style="font-size:18px"><b>Too Long</b></span>

</div>


<button id="calculate" onclick="calculateDate();">Calculate</button>   <button id="reset" onclick="resetForm();">Reset</button> 

</pre>


Solution

  • You can solve this adding a type="button" to your reset button.