Question

我的代码中有一个非常奇怪的错误，我无法弄明白。基本上，我正在制作一个简单的用户名保存/召回表单。我从用户那里获取输入并将其保存到浏览器的本地存储中。之后，当我尝试使用之前的输入进行访问时，我会想起本地存储中的项目。

我的if语句似乎不起作用。我尝试单独比较项目 - 我尝试将“document.getElementById（'userName'）”与随机字符串和“localStorage.getItem（'login_info'）”进行比较，反之亦然。但是，当我尝试

时

if (localStorage.getItem('login_info') === document.getElementById('userName'))

代码永远不会返回true作为输出。有任何想法吗？谢谢！

<!DOCTYPE html>

<html>
    <head>
        <title>Try</title>
    </head>
    <body>

        <p> Please type in your username and password </p>

        <form id="register_form"> 
            <input id="name1" type="text" placeholder="Name" value=""/>
            <input id="rgstr_btn" type="submit" value="Register" onClick="store()"/>  
        </form>

        <form name="login">
            <input id="userName" type="text" placeholder="Enter Username" value=""/>
            <input id="login_btn" type="submit" value="Login" onClick="check()"/>
            <input type="reset" value="Cancel"/>
        </form>

        <script type="text/javascript">

            var user_name = document.getElementById('name1');

            function store(){
                localStorage.setItem('login_info', user_name.value)
            }

            function check(){ 

                var storedName = localStorage.getItem('login_info');

                // entered data from the login form
                var user_Name = document.getElementById('userName');

                if (document.getElementById('userName') === localStorage.getItem('login_info')){
                    alert("Login Successful! Continuing to ..");
                    window.open("Us.html");
                }
                else{
                    alert("Login unsuccessful, please try again!");
                }
            }
        </script>

        <noscript> Please try a different browser! </noscript>

    </body>
</html>

Answer 1

使用document.getElementById（'userName'）。value从输入文本中获取值。

        var user_name = document.getElementById('name1');

        function store(){
            localStorage.setItem('login_info', user_name.value)
        }

        function check(){ 

            var storedName = localStorage.getItem('login_info');

            // entered data from the login form
            var user_Name = document.getElementById('userName').value;

            if (document.getElementById('userName').value == localStorage.getItem('login_info')){
                alert("Login Successful! Continuing to ..");
                window.open("Us.html");
            }
            else{
                alert("Login unsuccessful, please try again!");
            }
        }

Answer 2

就像@DhavalSoni所说，你需要使用element.value进行比较。 document.getElementById仅用于返回DOM对象而不是其值。尝试使用console.log（Document.getElementById（'username'））来检查Chrome调试器中返回的对象。

Javascript“if”语句中的奇怪错误

2 个答案: