JavaScript 无法在表单内运行

Question

我有以下 HTML 代码

   <div class = "login">
        <form>
        <input type="text" id="username" name="username" placeholder="Username" style="text-align:center"> <br> <br>
        <input type="password" id="password" name="password" placeholder="Password" style="text-align:center"> <br> <br>
        <input  onclick="loginButton();" name="login_btn" id="login_btn" type="submit"  value="Login">
        </form>
   </div> 

以及以下 JavaScript:

<script type="text/javascript">
    function loginButton() {
        console.log("this function was called")
    }
</script>

在我的控制台中，当我单击提交按钮时，“已调用此函数”仅出现一秒钟，然后消失。然而，当我将提交按钮放在表单之外时，消息会保留下来，并完全执行我的其余功能。

Answer 1

您的表单被提交并重新加载页面 - 由于 input 元素上的 type="submit"。

将其更改为

类型=“按钮”

或

onclick="loginButton();返回 false;"