javascript - 函数结果只持续一毫秒
问题描述
我刚刚进入 javascript 并且正在编写一个脚本,该脚本应该隐藏一个提交按钮并显示一个类似的按钮,该按钮显示该站点正在处理信息。下面的函数得到了我正在寻找的结果,但在恢复正常之前只有一毫秒。我不确定功能是否不正确,或者我是否必须添加睡眠命令或其他东西。
<form>
<input placeholder="ID"><br>
<button id="submit" onclick="send()" type="">Submit</button>
<button id="loading"><i class="fa fa-circle-o-notch fa-spin"></i> Submiting</button>
</form>
<script type="text/javascript">
function send() {
var submit = document.getElementById('submit');
var loading = document.getElementById('loading');
if (submit.style.display === "none") {
loading.style.display = "block";
} else {
submit.style.display = "none";
loading.style.display = "block";
}
}
解决方案
您的“提交”按钮提交表单,该表单再次请求并呈现原始版本。为了防止这种情况,首先向您的send()
函数添加一个参数,该参数包含事件上方的数据:
function send(event)
现在在函数末尾添加以下行:
event.preventDefault()
这可以防止表单被提交。
推荐阅读
- docker - npm install 在构建 docker 映像时返回连接超时
- google-picker - 如何在谷歌选择器中列出单个文件类型
- reactjs - 基于是否选中另一个复选框,对文本字段进行 React-hook-form 条件验证?
- spring-boot - 使用 Maven 的多阶段 Spring Boot Dockerization
- matlab - 定向边界框算法,需要对几行现有(工作)代码进行一些理解/澄清
- laravel - 需要帮助在 Laravel Voyager 中配置 TinyMCE
- android - FirestoreRecyclerAdaptor 未显示添加到 Firestore 的第一个项目
- python - Python3.8.2 新编译时的段错误
- python - 使用文件名数据集,将图像数据集创建为元组
- build - Next.js 构建中的必要文件