CODEWITHSUNDEEP
javascripthtmlfunctionlocal-storage
John Hao
John Hao

Reputation: 39

HTML localStorage Returns Null

My localStorage returns null, and I don't know why, the read function is not used, but just for help I put it anyway. Chrome says that it cannot ste innerHTML into null, and my troubleshooting alert info also returns null, but the code goes to the end. Any help would be useful, thank you.
The cookie:

<!doctype html>
<html>
  <head>
    <cookie>
      <script>localStorage.setItem('id',Math.floor(Math.random()*10))
</script>
    </cookie>
  </head>
  <body>
    <script>var id = localStorage.getItem('id')
    alert(id)</script>
  </body>
</html>

The Script:

<!doctype html>
<html>
  <head>

    <script>
    var theId=localStorage.getItem('id')


    function change(id,target){
      var info = localStorage.getItem(id);
      alert(info)
      document.getElementById(target).innerHTML=info;
    }
    function read(){
      var element=document.createElement('h1')
      element.innerHTML='You Want To Read'
      document.body.appendChild(element)
      alert('debug')

    }
    </script>
  </head>
  <body>
    <input type="button" value="Read" name="read_story" id="read_story" 
onclick=read();change(theId,info)>
    <p id='info'>initial</p>
  </body>
  <script>
  alert('debug');

  </script>
</html>

Upvotes: 0

Views: 679

Answers (1)

Quentin
Quentin

Reputation: 943643

You've misinterpreted the error message.

If it can't set the innerHTML of null then you have something.innerHTML = a_value. It is the something that is null not anything to do with local storage.

In change(theId,info), info is a variable. It is a reference to the element with id="info".

You use it here: document.getElementById(target).

info (now target) gets converted into a string ("[object HTMLParagraphElement]").

There is no element with id="[object HTMLParagraphElement]", so you get null.

When you call the function, you need to pass a string, not a variable.

Upvotes: 1

Related Questions