javascript - 当我单击关闭表单的按钮时,为什么我的 HTML 网页会刷新
问题描述
当我单击表单中运行 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";
}```
解决方案
正如您在此处看到的,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;
}
推荐阅读
- rust - 什么是序列化函数的好签名?
- java - 如何从数据库jdbc加载所有表
- mysql - 我如何从对话中获取最后一条消息
- java - E/JavaBinder:!!!失败的活页夹交易!!!(包裹大小 = 1714072)
- node.js - .save() 不是函数(猫鼬)
- macos - 在 Inline::C 中链接 macos 的框架
- java - 当 TextInputEditText 为空时,TextInputLayout 框笔划不显示
- go - 如何从 Golang 包中的文档中恢复结构,Bleve
- jquery - 由于 SET 语句,SQL 查询失败
- postgresql - 如何启动具有有效初始设置的 postgres docker 容器?