Question

对不起伙计们，第一次玩这个。这是HTML：

<!DOCTYPE html>
<html>
<head>
    <title>SuM BUTtonsS DOe</title>
    <link rel="stylesheet" href="buttons.css"/>
</head>
<body>
    <p>Please enter the password</p>
    <form id="enter" onSubmit="javascript:passCheck()">
        <input id="password" type="password" placeholder="Password">
    </form>
    <p id="incorrect"><em>INCORRECT PASSWORD</em></p>

    <script type="text/javascript">
        function passCheck() {
            var input = document.getElementById('password').value;

            if (input == 'herro') {
                window.alert("IT WORKS!!");
            }
            else {
                var incorrect = document.getElementById('incorrect');
                incorrect.style.display = "block";
            }
        }
    </script>
</body>
</html>

当我输入错误的密码时，INCORRECT PASSWORD出现，但只有几分之一秒。然后它又消失了。不知道为什么。

更新：

<!DOCTYPE html>
<html>
<head>
    <title>SuM BUTtonsS DOe</title>
    <link rel="stylesheet" href="buttons.css"/>
</head>
<body>
    <p>Please enter the password</p>
    <form id="enter" onSubmit="javascript:passCheck()">
        <input id="password" type="password" placeholder="Password">
    </form>
    <p id="incorrect"><em>INCORRECT PASSWORD</em></p>

    <script type="text/javascript">
        function passCheck() {
            var input = document.getElementById('password').value;

            if (input == 'herro') {
                window.alert("IT WORKS!!");
            }
            else {
                var incorrect = document.getElementById('incorrect');
                incorrect.style.display = "block";
                return false;
            }
        }
    </script>
</body>
</html>

Answer 1

在提交时，表单将触发默认操作，在这种情况下，将内容提交到同一页面（缺少action属性）。

所以你看到的是JavaScript运行并更改样式以显示错误消息，然后页面重新加载。

确保页面不会在return false末尾重新加载passCheck。更好的方法是使用addEventListener和event.preventDefault()，但这需要更多一些。

Answer 2

<p>Please enter the password</p>
<form id="enter" onSubmit="passCheck(); return false;">
    <input id="password" type="password" placeholder="Password">
    <input type="submit" value="Submit"/>
</form>
<p id="incorrect" style="display: none"><em>INCORRECT PASSWORD</em></p>

<script type="text/javascript">
    function passCheck() {
        var input = document.getElementById('password').value;

        if (input == 'herro') {
            window.alert("IT WORKS!!");
        }
        else {
            var incorrect = document.getElementById('incorrect');
            incorrect.style.display = "block";
        }
    }
</script>

更简单的密码系统的东西

2 个答案: