在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。