title: JavaScript not working inside form
body: <p>I have the following HTML code</p>
  
  <pre><code>   &lt;div class = "login"&gt;
          &lt;form&gt;
          &lt;input type="text" id="username" name="username" placeholder="Username" style="text-align:center"&gt; &lt;br&gt; &lt;br&gt;
          &lt;input type="password" id="password" name="password" placeholder="Password" style="text-align:center"&gt; &lt;br&gt; &lt;br&gt;
          &lt;input  onclick="loginButton();" name="login_btn" id="login_btn" type="submit"  value="Login"&gt;
          &lt;/form&gt;
     &lt;/div&gt; 
  </code></pre>
  
  <p>And the following JavaScript:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      function loginButton() {
          console.log("this function was called")
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>In my console, when I click the submit button, "this function was called" appears for only a brief second, and then disappears. Yet when I put the submit button outside of the form, the message stays, and fully executes the rest of my function. </p>