當我單擊關閉表單的按鈕時，為什么我的 HTML 網頁會刷新

Question

當我單擊表單中運行 closeForm() 的按鈕時，整個網頁都會刷新。 鑒於這個項目不會在任何地方保存任何信息，它會重置我在刷新時所做的任何事情。

它這樣做是有原因的嗎？

例如，這里是我拍攝的視頻的鏈接：

https://drive.google.com/open?id=1PyAXzuNSqvSNoKvgV-uGny9mB3F5NEqc

相關代碼在這里：

  <form class="form-container">
    <h1>Select Weapon</h1>  
    <input class = "longsword-button" type="image" src="./weapon-longsword.jpg" onclick = "closeForm()" />
    <input class = "dagger-button" type="image" src="./weapon-dagger.jpg" onclick = "closeForm()" />
  </form>
</div>

function openForm() {
  document.getElementById("myForm").style.display = "block";
}

function closeForm() {
  document.getElementById("myForm").style.display = "none";
}```

Answer 1

正如您在此處看到的，輸入上type='image'充當type='submit' 。 您的問題的幾個可能的解決方案：

1 - 使用常規<img />標簽代替<input type='image' />為您的圖像。

2 - 如果您保留現在的標記，請在單擊圖像時取消事件。

<input class = "longsword-button" type="image" src="./weapon-longsword.jpg" onclick = "return closeForm()" />
<input class = "dagger-button" type="image" src="./weapon-dagger.jpg" onclick = "return closeForm()" />

function openForm() {
  document.getElementById("myForm").style.display = "block";
  return false;
}

function closeForm() {
  document.getElementById("myForm").style.display = "none";
  return false;
}