i'm trying to make a 'welcome, abby' by clicking submit button but using local storage. Also, it shouldn't be 'welcome, '. it turns out keep refresh after i click the button
<p>
<label for="inName" >What is your name?</label>
<input type="text" id="inName" name="f_name"/>
</p>
<!-- GET COLOUR-->
<p>
<label for="inColor" >What is your favourite colour? </label>
<input type="color" id="inColor" name="f_color" />
</p>
<p>
<input type="submit" id="submit" value="Click to save" />
</p>
js
var name=document.getElementById("inName");
var backColor=document.getElementById("inColor");
var btn=document.getElementById("submit");
var btndel=document.getElementById("btnDel");
btn.onsubmit=getData;
btndel.onclick=deleteData;
function getData(){
var temp={
Name:name.value,
bckcolor:backColor.value
}
localStorage.setItem("temp", JSON.stringify(temp));
console.log(localStorage.getItem("temp"));
}
onsubmit is a <form> event, not <input>event.
moreover, if you call both onclick and onsubmit, onclick fires before onsubmit, so you delete data before you get.
You'd have to perform the variable assignment operation after the function, like so
function getData(){
var temp={
Name:name.value,
bckcolor:backColor.value
}
localStorage.setItem("temp", JSON.stringify(temp));
console.log(localStorage.getItem("temp"));
}
btn.onsubmit = getData;
and try it again. JavaScript is executed from the top of the file, to the bottom, so when it reads btn.onsubmit=getData;, it looks above it and says 'I don't see a variable declared called getData, it doesn't exist.' There's many other ways to execute this, of course, but I think that is what you're trying to do. I also do not see the deleteData variable declared anywhere.