在JS中重置function不断重新加载页面

Question

我的代码中有一个重置 function 使我的表单保持在重新加载循环中。

当我点击我的计算按钮时，我试图显示的 divtext 只是“闪烁”，它将 go 关闭。

我只希望它在单击重置按钮时重置。 不知道哪里出错了。 这是我的代码。

 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>

Answer 1

您可以在重置按钮上添加一个type="button"来解决这个问题。

Answer 2

考虑到您使用的是 html 形式

我建议您使用 <type="submit"> 和 <type="reset"> 编辑您的按钮，您可以删除按钮 onClick 并使用表单 onsubmit={}

<form id="rCalculator" onsubmit="calculateDate()">

Enter Start Date: <input type="date" name="startDate" id="startDate"/><br>

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

<button id="calculate" type="submit">Calculate</button>
<button id="reset" type="reset">Reset</button>

</form>

在计算 function 中有一个 event.preventDefault() 方法。 这样就可以消除 resetForm() function。