一个简单的 JS+HTML 脚本不适合我

Question

我有以下代码：

<div style="text-align: center;margin: auto;display: block;padding: 20px;width: 200px;">
        <button onclick="usernamePrompt()">Click to enter the username</button>
        <button onclick="passwordPrompt()">Click to enter the password</button>
        <button onclick="verify()">Verify here</button>
    </div>
    <div style="text-align: center;margin: auto;display: block;padding: 20px;">
        <p style="text-align: center;font-size: 20px;" id="verifyPara"></p>
    </div>
    <script type="text/javascript">
        function usernamePrompt () {
            window.username = prompt('Enter username:');
        };
        function passwordPrompt () {
            window.password = prompt('Enter password:');
        };
        function verify (username,password) {
            if (username === "immoral" && password ==="koala") {
                document.getElementById('verifyPara').innerHTML='Success!';
            } else {
                document.getElementById('verifyPara').innerHTML='Fail!';
                delete username;
                delete password;
            };
        }
    </script>

当我尝试这段代码时，当然，我会在两个“提示”中提交数据。我在 if-else 语句中使用这些数据，如果提交的用户名和密码是需要的，那么它应该产生“成功”，否则它应该产生“失败”。
问题是它永远不会产生“成功”，而总是“失败”。代码有什么问题？请帮忙。谢谢

Answer 1

由于您在全局范围内声明了变量，因此您只需检查它们即可。

function verify() {
    if (window.username === "immoral" && window.password === "koala") {
        document.getElementById('verifyPara').innerHTML = 'Success!';
    } else {
        document.getElementById('verifyPara').innerHTML = 'Fail!';
        delete username;
        delete password;
    };
}

https://jsfiddle.net/0s2fL79r/1/

Answer 2

首先我要说的是，您不能将密码作为带有 javascript 提示的文本字段。好吧，对于您的解决方案，您可以设置两个隐藏字段 - 一个用于用户名，另一个用于密码。提示后设置值。比较时，从隐藏值开始比较。 我再次说这不是现实生活中的做法。您可以查看它以更好地了解 javascript 的工作原理。
请看下面的代码：

<div style="text-align: center;margin: auto;display: block;padding: 20px;width: 200px;">
        <button onclick="usernamePrompt()">Click to enter the username</button>
        <button onclick="passwordPrompt()">Click to enter the password</button>
        <button onclick="verify()">Verify here</button>
    </div>
    <div style="text-align: center;margin: auto;display: block;padding: 20px;">
        <p style="text-align: center;font-size: 20px;" id="verifyPara"></p>
    </div>
    <input type="hidden" id="userName"/>
    <input type="hidden" id="password"/>
    <script type="text/javascript">

        function usernamePrompt () {
            var username = prompt('Enter username:');
            document.getElementById('userName').value= username;
        };
        function passwordPrompt () {
            var password = prompt('Enter password:');
            document.getElementById('password').value = password;
        };
        function verify ( ) {
            if (document.getElementById('userName').value == "immoral" && document.getElementById('password').value =="koala") {
                document.getElementById('verifyPara').innerHTML='Success!';
            } else {
                document.getElementById('verifyPara').innerHTML='Fail!';


            };
        }
    </script>

Answer 3

您的错误背后的原因是，您没有将参数传递给您的 verify 函数。只需传递参数，它就会工作。

function usernamePrompt () {
            window.username = prompt('Enter username:');
        };
        function passwordPrompt () {
            window.password = prompt('Enter password:');
        };
        function verify (username,password) {
            if (username === "immoral" && password ==="koala") {
                document.getElementById('verifyPara').innerHTML='Success!';
            } else {
                document.getElementById('verifyPara').innerHTML='Fail!';
                delete username;
                delete password;
            };
        }

<div style="text-align: center;margin: auto;display: block;padding: 20px;width: 200px;">
        <button onclick="usernamePrompt()">Click to enter the username</button>
        <button onclick="passwordPrompt()">Click to enter the password</button>
        <button onclick="verify(window.username, window.password)">Verify here</button>
    </div>
    <div style="text-align: center;margin: auto;display: block;padding: 20px;">
        <p style="text-align: center;font-size: 20px;" id="verifyPara"></p>
    </div>

Answer 4

您总是出现“失败”的原因是您将变量 username 和 password 传递给您的 verify(username, password) 函数，这些变量是本地验证函数（而不是将它们与全局变量混合）...在javascript中，如果我们有同名的局部变量和全局变量，那么局部变量会隐藏全局变量......你的代码也是如此......在验证函数中你正在访问局部变量（不是同名的全局变量）.. 所以你需要从参数中删除它们并与全局变量进行比较......虽然它不是在全局范围内存储变量并像这样使用它们的好方法，但为了你的问题，下面是一个可能的解决方案......

<script type="text/javascript">
    function usernamePrompt () {
        window.username = prompt('Enter username:');
    };
    function passwordPrompt () {
        window.password = prompt('Enter password:');
    };
    function verify () {
        if (window.username === "immoral" && window.password ==="koala") {
            document.getElementById('verifyPara').innerHTML='Success!';
        } else {
            document.getElementById('verifyPara').innerHTML='Fail!';
            delete window.username;
            delete window.password;
        };
    }
</script>