CODEWITHSUNDEEP
javascripthtmllocal-storage
Royston Teo
Royston Teo

Reputation: 51

How to store value from HTML text box by using Javascript local storage?

This is the method which I tried. I've added a feedback just to test out if the JavaScript variable siteName contains the value from the HTML textbox value but it reflected "[object HTMLInputElement]" instead. Any idea why?

<!DOCTYPE html>
<html>
    <head>
        <title>Storing HTML value into Javascript local storage</title>
    </head>
    <body>
        <h1 id="2ndid">Hello</h1>

       <input type="text" id="firstid">
       <button onclick="myFunction()">LocalStorage</button>
       <button onclick="myFunction2()">Feedback</button>  

       <script type="text/javascript">
           var siteName = document.getElementById('firstid');
           function myFunction() {
               localStorage.setItem('store1', siteName);
           }
           function myFunction2() {
               document.getElementById("2ndid").innerHTML = siteName;
           }
       </script>
    </body>
</html>

Upvotes: 2

Views: 1834

Answers (4)

Sid Ali
Sid Ali

Reputation: 1857

You are not initialising your variable.

here a working code.

<!DOCTYPE html>
<html>
    <head>
        <title>Storing HTML value into Javascript local storage</title>
    </head>
    <body>
        <h1 id="2ndid">Hello</h1>

       <input type="text" id="firstid">
       <button onclick="myFunction()">LocalStorage</button>
       <button onclick="myFunction2()">Feedback</button>  

       <script type="text/javascript">
           var siteName;
           function myFunction() {
           siteName= document.getElementById('firstid').value;
               localStorage.setItem('store1', siteName);
           }
           function myFunction2() {
               document.getElementById("2ndid").innerHTML = siteName;
           }
       </script>
    </body>
</html>

Upvotes: 0

Zivlerr
Zivlerr

Reputation: 1

This is a pretty simple fix, you just have to add the value property at the end of the second fucntion.

function myFunction2() {
      document.getElementById("2ndid").innerHTML = siteName.value;
}

Upvotes: 0

Amardeep Bhowmick
Amardeep Bhowmick

Reputation: 16908

You have to use the value property to get the actual text from the input. Otherwise it will return the reference of the input text field. The reference is type of HTMLInputElement which has a value property holding actual data entered in the text field.

<!DOCTYPE html>
<html>
<head>
<title>Storing HTML value into Javascript local storage</title>
</head>
<body>
   <h1 id="2ndid">Hello</h1>

   <input type="text" id="firstid">
   <button onclick="myFunction()">LocalStorage</button>
   <button onclick="myFunction2()">Feedback</button>  

<script type="text/javascript">
    var siteName;
    function myFunction() {
         siteName = document.getElementById('firstid').value;
         localStorage.setItem('store1', siteName);
    }
    function myFunction2() {
        document.getElementById("2ndid").innerHTML = siteName;
    }

</script>

</body>
</html>

https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement

Upvotes: 2

Dipak
Dipak

Reputation: 6950

Use the value of the input element to retrieve from value form it, or else you will be getting an object. 

document.getElementById("2ndid").innerHTML = siteName.value;

Upvotes: 0

Related Questions