当我单击关闭表单的按钮时，为什么我的 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;
}