Javascript HTML密码框if/then重定向

如果可能的话，我需要一些帮助。 我正在尝试为我的测试网站建立一个密码表单，在那里你只会在首页上看到一个密码框

所以我建造了这个：

<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>

函数myFunction（）{
var passwd=document.getElementById（'password'）。值；
if（passwd=='passwordhere'）{
window.location.href=“home.html”.fadeOut（1000）；
}
}

显然它不起作用，也可能是完全错误的。任何关于我可能修复的东西的指针，或者如果它完全是垃圾，我应该如何着手构建它

提前谢谢

更新

通过以下方式使其正常工作：

<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>

函数检查（）{
var passwd=document.getElementById（“密码”）.value；
if（passwd==“瓜”）{
返回true；
}否则{
返回false；
}
}

感谢@Xenon的帮助。

问题出在这里：

submit按钮设计用于HTML表单。目前，密码框和提交按钮之间没有关联，更重要的是，没有关联

请尝试以下方法：

<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>

函数myFunction（事件）{
var passwd=document.getElementById（'password'）。值；
如果（passwd==“此处密码”）{
//无所事事
//Onsubmit阻止表单将页面切换到“action”（表单上的属性）
//但是一旦函数退出，它就会转到页面
//如果未指定或'action'，则它将重新加载当前页面（您可能会看到一个问号），这只是GET参数
//如果您的密码正确，则我们不会阻止默认操作的发生，
//所以你去home.html
}否则{
//如果密码错误，请确保您不会访问home.html
event.preventDefault（）；
event.stopPropagation（）；
}
}

我的意思是按钮不可见。根据onclick的说法，我以前试过，但没用。用你的代码重试，也没有希望。仍然不起作用。我不明白，它看起来完全正确。我尝试添加一个else，只是为了看看会发生什么：

else{alert（'wadsa'）；}

在错误时显示消息，在正确时不显示消息，因此它工作正常，只是不重定向。我试着将URL替换为google或其他任何东西，但没有成功。所以现在它只是缩小到为什么它不会重定向。我明白了。您在

“home.html”

字符串的末尾添加了一个

.fadeOut（1000）

fadeOut（）

不是

window.location

或

String

（您在字符串

“home.html”

中调用了它）的函数，请尝试删除该函数，但运气不好：（欢迎使用stackoverflow。请记住，任何人都可以查看源代码以获取密码。是的，我知道，但出于我的目的，这不是一个真正的问题。不过，谢谢。