2

<!-- HTML -->

<html>       
<head>
<title> name</title>
   <link rel="stylesheet" type="text/css" href="index.css">
</head>       
<body>
       
  <p id = "name"></p>

  <script src = "index.js"> 
      var x = "Hello my name is " + localStorage.getitem("text");
      document.getElementById("name").innerHTML = x; 
  </script>
    
</body>    
</html>

I have put some text into local storage and now I want to add that text to the page through HTML by inserting it into the paragraph. For example if I asked for someones name on one page, stored it in local storage and then on the next page I could Say: "Hello Steve".

edit: moving the script has no effect on the outcome. The information is definitely being stored because if I use to call a function that uses:

document.write("

Hi " + localStorage.getItem("text") + "

")

then the text will appear on the screen but the rest of the body will not load. So for example if i wanted a background color that would not work. To me this makes it seem that this is not a duplicate of the other question.

Jishnu V S
  • 8,164
  • 7
  • 27
  • 57
RomanF
  • 23
  • 5
  • Please edit your question so as to include the code you have already tried, and an explanation of how it is not working. Also, you may find this helpful: [How do I ask a good question?](http://stackoverflow.com/help/how-to-ask). – MJH Oct 08 '16 at 00:39
  • Possible duplicate of [Why does jQuery or a DOM method such as getElementById not find the element?](http://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) – Andy Ray Oct 08 '16 at 00:40
  • Move script to end of body tag. – Keith Oct 08 '16 at 00:43

1 Answers1

4

The problem with your code snippet is that the javascript inside the script tag is getting executed before the p tag is created and added to the DOM.

The easiest way to fix this is by moving the script tag right above the </body> tag like this:

<body>
    <p id="name"></p>
    <script type="text/javascript"> 
        var x = "Hello my name is " + localStorage.getItem("text");
        document.getElementById("name").innerHTML = x; 
    </script>
</body>

In addition, you generally don't want to have an src in that script tag as well as inline javascript.

harryh
  • 346
  • 2
  • 9
  • That didn't seem to do anything. The information is being saved because I can add text to the screen by initiating the function when the body loads, and the text will appear but then no html in the body will load. Thank You for trying though. – RomanF Oct 08 '16 at 01:48
  • First off, I noticed that getItem wasn't capitalized, that's definitely a problem since javascript is case sensitive. Otherwise, I've verified that the above code snippet works just fine. If I put` localStorage.setItem("text", "Fred")` into the console, hit enter, and reload, I see "Hello my name is Fred". – harryh Oct 08 '16 at 15:06
  • Well... that was it. I just had to capitalize the I. Sorry for wasting your time. – RomanF Oct 09 '16 at 02:48