JS中的重置功能不断重新加载页面

Question

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

当我点击我的计算按钮时，我试图显示的 divtext 只是“闪烁”，它会熄灭。

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

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 表单

我建议您使用和编辑您的按钮您可以删除按钮 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>

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

JS中的重置功能不断重新加载页面

Reset function in JS keeps reloading page

javascript

reset