Login attempts and redirect
<p>I have created some code for a login page. What I want is, if the username and password are correct, then go to the Home.html page. Otherwise, stay on the login page but only give the user 3 attempts to log in. I can't seem to figure out what is wrong as it doesn't count how many attempts I make nor does it redirect to the Home.html page when I get it right.</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var counter = 0;

function checkdetails() {
  var name = "",
    password = "";

  name = form1.txtusername.value
  password = form1.txtpassword.value

  if (name == "Shauna" &amp;&amp; password == "8nss") {
    window.alert("Both right")
    window.location.replace("Home.html");

    form1.txtusername.value = ""
    form1.txtpassword.value = ""

  } else if (name == "Shauna" &amp;&amp; password != "8nss") {
    window.alert("Incorrect Password.")
    counter = counter + 1

    window.alert(3 - counter + " attempts left")
    form1.txtusername.value = ""
    form1.txtpassword.value = ""

  } else if (name != "Shauna" &amp;&amp; password == "8nss") {
    window.alert("Incorrect Username")
    counter = counter + 1

    window.alert(3 - counter + " attempts left")
    form1.txtusername.value = ""
    form1.txtpassword.value = ""
  } else if (name != "Shauna" &amp;&amp; password != "8nss") {
    window.alert("Both Wrong")
    counter = counter + 1

    window.alert(3 - counter + " attempts left")
    form1.txtusername.value = ""
    form1.txtpassword.value = ""
  }
  if (counter == 3) {
    window.alert("Incorrect details - Login failed")
    window.close()
  }

}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form action="" method="post" name="form1" onsubmit="checkdetails()"&gt;
  &lt;table bgcolor="white" width="500" border="0" align="center"&gt;
    &lt;col width="200"&gt;
      &lt;col width="200"&gt;


        &lt;tr&gt;
          &lt;th colspan="2" align="center" bgcolor="grey"&gt;Login&lt;/th&gt;
        &lt;/tr&gt;


        &lt;tr&gt;
          &lt;td&gt;&amp;nbsp;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td colspan="2" align="center"&gt;Username&lt;/td&gt;
        &lt;/tr&gt;

        &lt;tr&gt;
          &lt;td colspan="2" align="center"&gt;
            &lt;label&gt;
              &lt;input type="text" name="txtusername" id="txtusername" class="info" required/&gt;
            &lt;/label&gt;
          &lt;/td&gt;

          &lt;tr&gt;
            &lt;td&gt;&amp;nbsp;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td colspan="2" align="center"&gt;Password&lt;/td&gt;
          &lt;/tr&gt;


          &lt;tr&gt;
            &lt;td colspan="2" align="center"&gt;
              &lt;label&gt;
                &lt;input type="password" name="txtpassword" id="txtpassword" class="info" required/&gt;
              &lt;/label&gt;
            &lt;/td&gt;
          &lt;/tr&gt;



          &lt;tr&gt;
            &lt;td&gt;&amp;nbsp;&lt;/td&gt;
          &lt;/tr&gt;


          &lt;tr&gt;
            &lt;td colspan="2"&gt;
              &lt;label&gt;
                &lt;input type="checkbox" name="terms" value="terms" id="terms" /&gt;Remember Me&lt;/label&gt;
            &lt;/td&gt;
          &lt;/tr&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;tr&gt;
          &lt;/tr&gt;


          &lt;tr&gt;
            &lt;td&gt;&amp;nbsp;&lt;/td&gt;
          &lt;/tr&gt;

          &lt;tr&gt;
            &lt;td&gt;
              &lt;label&gt;
                &lt;input type="submit" name="Login" id="Login" value="Login" /&gt;
              &lt;/label&gt;
            &lt;/td&gt;
            &lt;td&gt;
              &lt;label&gt;
                &lt;input type="reset" name="Reset" id="Reset" value="Reset" /&gt;
              &lt;/label&gt;
            &lt;/td&gt;
          &lt;/tr&gt;
  &lt;/table&gt;
&lt;/form&gt;</code></pre>
</div>
</div>
</p>