HELP! Kinda confused at my code

So, i've been working on a small project with localStorage, and what I'm trying to do is have the first time the user opens the page, it asks for the name of the user, then if the user closes the tab, and comes back to the page, it will already have written on the page, " your name is ..." But i don't know how to quite do that. Could someone help me? <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="main.css"> <title>My Website</title> </head> <script> function myFunction() { if (localStorage.getItem("objectname")==="null") { var name = prompt("What is your name?") var x = name; localStorage.setItem("objectname" , x); function display() { document.getElementById('p').innerHTML= "Your name is: " + localStorage.getItem("objectname"); } } else { alert("Your name is" + localStorage.setItem("objectname")); } } </script> <body> <button onclick="myFunction()">Run entire code!</button> <br /><br /> <button onclick="display()"> Click Me to change text</button> <p id="p">Your name is: Insert Name</p> </body> </html> *The css stylesheet isn't important

html javascript hi project storage localStorage help!

3rd Sep 2017, 12:22 AM

Akili KiKi

3 Answers

+ 5

The main problem of your code (not solved by @Calvin ;)) is the condition of your 'if' statement: you're testing if the returned value by localStorage.getItem() is strictly equal to the string "null", but that's never true, as the returned value when key doesn't already exist will be the value-type 'null', but not the string "null" ^^ You should correct it by: if (localStorage.getItem("objectname")===null) { (retrieve the quotes...) However, you could also solve in part the problem by converting the returned value to its string representation, but it will fail if the recored value is "null" (more safe to strictly compare to the value-type 'null' :P Anyway, to be fully runnable, and as suggested by @Calvin code, you need to define the display() function outside of the myFunction() body, as you call it from outside, and it doesn't be reachable from outside the scope where you declared the function (here you call it from the 'onclick' event attribute, so you are in the global scope, and you need to have it declared in the global scope ^^)... if you want/need to call it also during the myFunction() execution, you need to expicitly call it. You can do that even if you keep the display() definition inside, but only by this way (and in your code, display() is never executed). And last, but essential, in the 'else' closure, you've used 'setItem' instead of 'getItem) ^^: function display() { document.getElementById('p').innerHTML= "Your name is: " + localStorage.getItem("objectname"); } function myFunction() { if (localStorage.getItem("objectname")===null) { var name = prompt("What is your name?"); var x = name; localStorage.setItem("objectname" , x); // uncomment if you want to call display from here: //display(name); // or: display(x); // ... why use two variable? @@ } else { alert("Your name is" + localStorage.getItem("objectname")); } }

3rd Sep 2017, 1:21 AM

visph

+ 2

Try change the Javascript to function myFunction() { var storedName = localStorage.getItem("name"); if (storedName==="null") { storedName = prompt("What is your name?"); localStorage.setItem("name" , x); } display(storedName); } function display(name) { document.getElementById('p').innerHTML= "Your name is: " + name; }

3rd Sep 2017, 12:40 AM

Calviղ