javascript - HTML 密码框 if/then 重定向

Question

如果可以的话，需要一点帮助。我正在尝试为我的测试网站构建一个密码表单，您只需在首页上看到一个密码框即可。

所以我构建了这个:

<div class="inputcontent">
    <input type="password" id="password">
</div>
<div class="buttons">
    <input type="submit" style="display: none" .click()="myFunction">
</div>

<script>
    function myFunction() {
        var passwd = document.getElementById('password').value;
            if(passwd == 'passwordhere'){
                 window.location.href="home.html".fadeOut(1000);
            }
    }
</script>

显然它不起作用，而且可能是完全错误的。关于我可以修复什么的任何指示，或者如果它完全是垃圾，我应该如何构建它？

提前致谢。

更新

设法使用它使其工作:

<form style="margin-top: 20%;margin-left: 40%" 
onsubmit="return check();" action="home.html" >
    <div class="inputcontent">
        <input type="password" id="password" />   
    </div>
    <div class="buttons">
        <input type="submit" style="display: none"/>
    </div>
</form>

<script>
    function check(){
        var passwd = document.getElementById("password").value;
            if (passwd == "melon"){
            return true;
            } else {
            return false;
           }
    }
</script>

感谢@Xenon 的所有帮助。

Answer 1

问题是这样的:

提交按钮设计用于 HTML 表单。正如您目前所拥有的，密码框和提交按钮之间没有关联，更重要的是，NO <form> 。

试试这个:

<form onsubmit="myFunction();" action="home.html">
 <div class="inputcontent">
  <input type="password" id="password" />
 </div>
 <div class="buttons">
  <input type="submit" style="display: none" onclick="myFunction()" />
 </div>
</form>
<script>
 function myFunction(event) {
 var passwd = document.getElementById('password').value;
 if(passwd == 'password here'){
  // Do Nothing    

  // Onsubmit stops the form from switching the page to `action` (attribute on form)
  // But once the function exits, it goes to the page
  // If <form action=""> or `action` is not specified, then it will reload the current page (you might see a question mark), that's just the GET parameter

  // If your password is right, then we do NOT prevent the default action from occurring, 
  // So you go to home.html
 } else {
  // Makes sure you DONT go to home.html if your password is wrong
  event.preventDefault();
  event.stopPropagation();
 }
}
</script>