javascript - 单击一次时如何隐藏按钮，它将显示当前时间和日期

Question

我正在尝试创建一个提交按钮，单击该按钮将显示当前日期和时间，然后该按钮将被隐藏我的意思是按钮将被替换为时间和日期。我看到了一个例子，但它显示了格林威治标准时间和当前位置名称。那么如何更换按钮并显示时间呢？

使用此代码显示带有格林威治标准时间和位置名称的日期和时间，但它不会剩余并且页面正在重新加载并且只显示按钮。我不需要显示位置名称和 GMT 我只需要显示当前时间和日期。

$(document).ready(function(){
    $("#hide").click(function(){
        $("#button-to-hide").hide();
        $("p1").show();
    });

});
$('#button-to-hide').hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<form method="post" action="{{route('signInUpdate','id')}}">
  {{ csrf_field()}}
  <input type="hidden" name="isSignIn" value="{{$internalVisitor->isSignIn}}"/>
  <input type="hidden" name="tableId" value="{{$internalVisitor->id}}"/>
  <button type="submit">
<a id="hide" onclick="document.getElementById('hide').innerHTML = Date()">Hide</a></button>
</form>

Answer 1

由于它位于表单内，因此您需要使用 e.preventDefault 来阻止按钮的默认行为

$(document).ready(function() {
  $("#hide").click(function(e) {
    e.preventDefault();
    document.getElementById('hide').innerHTML = Date();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" action="">

  <button type="submit">
    <a id="hide">Hide</a></button>
</form>