CODEWITHSUNDEEP
javascripthtml
HelloHello
HelloHello

Reputation: 28

Store user input and display

What the code should do is take in the user input and store in the LocalStorage and then get the input that have been stored and display it. Since is localStorage it should keep the input and display it after closing and opening.

I've followed this tutorial and tried to modify and fit my what I want to do. The problem is it doesn't save.

Sorry if this is a bad question

function saveBio() {
  var newBio = document.getElementById("bio").value; //get user input
  localStorage.setItem("storeBio", newBio); //store it

  displayBio(newBio) //take to next function
}

function displayBio(newBio) {

  document.getElementById("bio").innerHTML = localStorage.getItem("storeBio");//display the localstorge
 
}
<input id="bio" type="text" name="bio" placeholder="Bio" onmouseout=saveBio() ">

Upvotes: 0

Views: 115

Answers (4)

Stundji
Stundji

Reputation: 864

Fix this line like that:

 document.getElementById("bio").innerHTML = localStorage.getItem(newBio); // you need to get the element by providing the Id value

document.getElementById is a function which takes an Id value to find the matching element and returns it. Then you access the innerHTML property of that element and change it.

Upvotes: 1

Jack Bashford
Jack Bashford

Reputation: 44087

The problem with your code is this line in displayBio():

document.getElementById.innerHTML = localStorage.getItem("storeBio");

You're not giving getElementById an ID to get - since you want to display the bio, it should be this instead:

document.getElementById("bio").innerHTML = localStorage.getItem("storeBio");

Upvotes: 1

Mehrdad Shokri
Mehrdad Shokri

Reputation: 2134

Your don't set and get values in a correct manner.

localStorage.setItem accepts 2 arguments as input. (The key and the value)
localStorage.getItem accepts 1 argument as the key to retrieve.

Set your item with a key and a value and retrieve it with the key you have specified.

Reference

Upvotes: 0

Yakalent
Yakalent

Reputation: 1152

In your getItem function you used the value of the key to get the item.

The getItem() method of the Storage interface, when passed a key name, will return that key's value or null if the key does not exist.

use localStorage.getItem("storeBio") instead of localStorage.getItem(newBio)

Besides that u must change your getElementById to: document.getElementById("bio").innerHTML.

Upvotes: 0

Related Questions