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

type="submit"のinput要素のために、フォームが送信され、ページがリロードされます。

変更、それのいずれか

type="button"

または

onclick="loginButton(); return false;"

の