javascript - Unable to display html input -
so have 2 input boxes, 1 username , 1 password. want display inputs user after nail login, reason appears is: [object htmlinputelement][object htmlinputelement] code:
<!doctype html> <meta charset="utf-8"> <html lang="en-us"> <head> <link rel="stylesheet" type="text/css" href="java.css"> </head> <title>java</title> <body> <form> user name: <input id="uname"></input> <br> <br> password: <input id="pass"></input> <button onclick="login()">login</button> </form> <script> var fname = document.getelementbyid("uname").value;//username var lname = document.getelementbyid("pass").value;//password // check browser back upwards function login() { if (typeof(storage) != "undefined") { // store localstorage.setitem("uname", uname);//saves username localstorage.setitem("pass", pass);//saves password // retrieve document.getelementbyid("uname").innerhtml = localstorage.getitem("uname");//gets document.getelementbyid("pass").innerhtml = localstorage.getitem("pass");//gets alert(uname + pass);//shows business relationship info } else { document.getelementbyid("result").innerhtml = "sorry, browser not back upwards web storage...";//error } } </script> </body> </html>
you got few things mixed up:
you got variables mixed up; seek referenceuname , pass everywhere, have never declared variables (you have declared fname , lname). you should declare variables within login() function, otherwise declared before user has entered value input fields. you should utilize .value instead of .innerhtml set set value of input-element. below code issues fixed:
fiddle: http://jsfiddle.net/rx0rjaf3/7/
html
<body> <form> username: <input id="user" /><br /><br /> password: <input id="pass" /> <button onclick="login()">login</button> </form> </body> input elements not have closing tag this: <input></input>. instead, self-closing this: <input id="user" />. also seek close <br /> tags (like that, instead of <br>). same goes other elements without closing tag. (i removed of html code create reply more readable. wasn't necessary answer, doesn't mean of course of study should remove on own site.) js
function login() { if (typeof(storage) != "undefined") { // store localstorage.setitem("user", document.getelementbyid("user").value); //saves username localstorage.setitem("pass", document.getelementbyid("pass").value); //saves password // retrieve var user = localstorage.getitem("user"); //gets username var pass = localstorage.getitem("pass"); //gets password document.getelementbyid("user").value = user; document.getelementbyid("pass").value = pass; alert("username: "+user+"\n"+"password: "+pass); //shows business relationship info } else { document.getelementbyid("result").innerhtml = "sorry, browser not back upwards web storage...";//error } } i moved declaration of variables retrieve-section. did this, because first store .values localstorage, after store localstorage .values 1 time again - assume create sure stored. after that, alert vars declared before stored .values localstorage, still won't know sure if stored localstorage, see? moving vars retrieve-section, problem fixed. i set js code in separate 'file'. recommend well. it's not absolutely necessary, much cleaner. in jsfiddle utilize sessionstorage instead of localstorage. prevent my, , else's localstorage doesn't stuffed test values. as final advice, highly recommend store usernames , passwords in database on server, instead of client-side (be in localstorage, cookies, text files or else)!
javascript input
No comments:
Post a Comment