Odd error in Javascript "if" statement

Question

I have a really weird error in my code that I just cannot figure it out. Basically, I'm making a simple username save/recall form. I take in input from a user and save it into a localstorage of browser. After, when I try to access with the input from before, I would recall the item from the localstorage.

My if statement doesn't seem to work. I tried comparing items individually - I tried comparing "document.getElementById('userName')" with a random string and "localStorage.getItem('login_info')" vice versa. However, when I try to do

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

The code would never return true as an output. any ideas? Thanks!

<!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>

Because you are comparing objects. See [here](http://stackoverflow.com/q/201183/5647260). — Andrew Li, Nov 14 '16 at 06:01
Comparing objects with objects is not a good practice in JavaScript — , Nov 14 '16 at 06:01
Oh shoot, I never noticed that part - bear with me, I'm still a beginner in javascript... in this scenario then, how could you compare those two strings? — SAValkyrie, Nov 14 '16 at 06:02
If I create variables that corresponds to those two objects would it work? — SAValkyrie, Nov 14 '16 at 06:03
You've got a mess on your hands, and some questionable security practices, but given your code samples, changing your `if` condition inside of the `store` function to `if (user_Name.value === storedName){` should work for you. — JAAulde, Nov 14 '16 at 06:03
Yeah, I know that my code is not the prettiest and it has massive security problems (I'm learning how to use MySQL after...) but I just wanted to try something out that I had in mind! — SAValkyrie, Nov 14 '16 at 06:09

score 1 · Accepted Answer · answered Nov 14 '16 at 06:09

Use document.getElementById('userName').value to fetch value from input text.

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

score 0 · Answer 2 · answered Nov 14 '16 at 18:14

Like @DhavalSoni said, you need to use element.value to compare. document.getElementById is only meant to return the DOM object and not its value. Try console.log(Document.getElementById('username')) to examine the returned object in Chrome debugger.

Odd error in Javascript "if" statement

2 Answers2