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表单。正如您目前所拥有的那样，密码框和提交按钮之间没有关联，更重要的是，否<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>

HTML密码框if / then redirect

1 个答案: