首页 > 解决方案 > 函数结果只持续一毫秒

问题描述

我刚刚进入 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";
    }
  } 

标签: javascript

解决方案


您的“提交”按钮提交表单,该表单再次请求并呈现原始版本。为了防止这种情况,首先向您的send()函数添加一个参数,该参数包含事件上方的数据:

function send(event)

现在在函数末尾添加以下行:

event.preventDefault()

这可以防止表单被提交。


推荐阅读