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>
You can solve this adding a type="button"
to your reset button.