javascript - how do I store these three variables into local storage? -
i creating mad lib , can't variables store inside local storage. have 3 variables: noun, nountwo, , name. end goal once variables stored user able reload page , last story generated displayed @ top of page.
<script> function lib() { var storydiv = document.getelementbyid("story"); var nountwo = document.getelementbyid("nountwo").value; var noun = document.getelementbyid("noun").value; var name = document.getelementbyid("name").value; storydiv.innerhtml = "one day " + noun + " attacked " + nountwo + ", , defeated " + name + "!"; noun.replace('noun', noun.value); noun.replace('nountwo', nountwo.value); noun.replace('name', name.value); } var libbtn = document.getelementbyid('generate'); libbtn.addeventlistener('click', lib); localstorage.setitem('noun', noun.value); console.log(localstorage); </script>
<html> <head> <title>mad lib lab</title> </head> <body> <h1>mad libs</h1> <div id="result"></div> <div id="story"> 1 day <input type="text" id="noun" placeholder="noun"> attacked <input type="text" id="nountwo" placeholder="noun"> ,but defeated <input type="text" id="name" placeholder="famous person">! <button id="generate">generate</button> </div> </body> </html>
if need display last story, don't need store 3 variables.
also here, noun doesn't contain either of string you're searching (it contains wrote in noun input):
noun.replace('noun', noun.value); noun.replace('nountwo', nountwo.value); noun.replace('name', name.value);
this should trick:
function lib() { var storydiv = document.getelementbyid("story"); var nountwo = document.getelementbyid("nountwo").value; var noun = document.getelementbyid("noun").value; var name = document.getelementbyid("name").value; var story = "one day " + noun + " attacked " + nountwo + ", , defeated " + name + "!"; storydiv.innerhtml = story; localstorage.setitem('laststory', story); } var libbtn = document.getelementbyid('generate'); libbtn.addeventlistener('click', lib); if(localstorage.getitem('laststory')) { document.getelementbyid('result').innerhtml = localstorage.getitem('laststory'); }
Comments
Post a Comment