Javascript中的奇怪错误"if"声明

Odd error in Javascript "if" statement

本文关键字：quot if 声明 错误 Javascript      更新时间：2023-09-26

我的代码中有一个非常奇怪的错误，我只是不能弄清楚它。基本上，我正在制作一个简单的用户名保存/召回表单。我接收来自用户的输入并将其保存到浏览器的本地存储中。之后，当我尝试使用之前的输入进行访问时，我将从localstorage中召回项。

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

使用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!");
            }
        }

就像@DhavalSoni说的，你需要使用元素。值进行比较。文档。getElementById只表示返回DOM对象，而不是它的值。尝试console.log(Document.getElementById('username'))来检查Chrome调试器中返回的对象。

相关文章：