Form elements values not getting stored in javascript variables

Question

I have been learning javascript by building some mockup website while doing so an error popped up where the form elements are not getting stored to my javascript variables.I have inserted my HTML code of modal dialog box that contains the form and the JS code.Can anyone suggest me where I am going wrong?

 document.getElementById("sub").addEventListener("click",store()); function store(){ var userName = document.getElementById("nme").value; var emailId = document.getElementById("mail").value; var password = document.getElementById("pd").value; var rpassword = document.getElementById("rpd").value; console.log(userName); if (password !== rpassword){ alert("your password doesn't match"); } else{ localStorage.setItem("name",userName.value); localStorage.setItem("email",emailId.value); localStorage.setItem("password",password.value); } } 

 <div class=row> <form class="col-xs-12" method="post"> <div class="form-group"> <input type="text" class="form-control form-design input-lg enable" id="nme" name="user" placeholder="UserName"> <input type="text" class="form-control input-lg enable" id="mail" name="mail" placeholder="Email-Id"> </div> <div class="form-group"> <input type="password" class="form-control form-design input-lg enable" id="pd" name="pwd" placeholder="Password"> <input type="password" class="form-control input-lg enable" name="rpwd" id="rpds" placeholder="Retype Password"> <input type="submit" id="sub" class="btn btn-block btn-lg navi-style lnk" value="SignUp"> </div> </form> </div> <footer class="align">Already a member?<a class="newlnk" data-toggle="modal" href="#login">SignIn</a> </footer> </div> <!--body closed--> </div> <!--content closed--> </div> <!--Dialog box closed--> </div> <!--Model closed--> </div> <!--container closed--> 

Answer 1

You are trying to store userName.value instead of userName (and so on). Also, you add an event listener but actually call the function store instead of referencing it.

document.getElementById("sub").addEventListener("click",store);
function store(){
    var userName = document.getElementById("nme").value;
    var emailId = document.getElementById("mail").value;
    var password = document.getElementById("pd").value;
    var rpassword = document.getElementById("rpd").value;
    console.log(userName);
        if (password !== rpassword){
          alert("your password doesn't match");
        }
        else{

            localStorage.setItem("name",userName);
            localStorage.setItem("email",emailId);
            localStorage.setItem("password",password);
        }
    }

Answer 2

The variables to store should be of type string ie var userName should already be a string, so storing userName.value will result in trying to store 'undefined', hence the correct values to store should be the var without the 'value' property and one of your element ids is misspeled ie

var rpassword = document.getElementById("rpds").value;

.

eg try the following code instead of the current store function

 function store(){ var userName = document.getElementById("nme").value; var emailId = document.getElementById("mail").value; var password = document.getElementById("pd").value; var rpassword = document.getElementById("rpds").value; console.log(userName); if (password !== rpassword){ alert("your password doesn't match"); } else{ localStorage.setItem("name",userName); localStorage.setItem("email",emailId); localStorage.setItem("password",password); } }