Estoy tratando de hacer un 'bienvenida, abby' haciendo clic en el botón Enviar pero usando el almacenamiento local. Además, no debería ser 'bienvenido'. resulta mantener la actualización después de hacer clic en el botón
<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 es un evento de <form> , no un evento de <input> .
además, si llama tanto a onclick como onsubmit , onclick se activa antes de onsubmit , por lo que elimina los datos antes de obtenerlos.
Tendrías que realizar la operación de asignación de variables después de la función, así
function getData(){ var temp={ Name:name.value, bckcolor:backColor.value } localStorage.setItem("temp", JSON.stringify(temp)); console.log(localStorage.getItem("temp")); } btn.onsubmit = getData; e inténtalo de nuevo. JavaScript se ejecuta desde la parte superior del archivo hasta la parte inferior, por lo que cuando lee btn.onsubmit=getData; , mira arriba y dice 'No veo una variable declarada llamada getData, no existe'. Hay muchas otras formas de ejecutar esto, por supuesto, pero creo que eso es lo que estás tratando de hacer. Tampoco veo la variable deleteData declarada en ninguna parte.