Estoy usando localStorage para guardar una cadena para que el usuario pueda ingresar el título y se guardará para las próximas veces. Quiero agregar un botón que elimine el texto mostrado (el almacenamiento local) y habilite el campo de entrada, para que el usuario pueda escribir otro título. Pensé en "crear" una entrada HTML desde JS, por lo que el título se elimina y hay un campo de entrada. ¿Es la forma correcta? es otra forma de hacerlo?
En realidad, no sé qué debo escribir de nuevo(){} ¡Muchas gracias!
function init() { document.getElementById("0").innerHTML = localStorage.a; document.getElementById("0").style.float = "center"; document.getElementById("0").style.width = "70%"; document.getElementById("0").style.border = "10px"; document.getElementById("0").style.textAlign = "center"; } function again() {} <body onload="init();"> <table id="table"> <tr> <th class="button" id="0"> <input id="inside" name="inside" type="text" disabled> </th> </tr> </table> <h1>tasks</h1> <button onclick="again();">again</button> </body>No estoy seguro si esto es lo que estás buscando...
Crear contenido HTML usando JS podría ser una forma de hacerlo, así.
Otra forma es tener su entrada y botón para guardar nuevos datos ocultos, y luego simplemente mostrarlos y ocultarlos si es necesario, en lugar de crearlos cada vez.
(Tenerlos simplemente ocultos sería mejor para el rendimiento, en este caso simple no estaría preocupado por eso).
Cambié sus datos almacenados por "datos de ejemplo".
Debe agregar una línea de código para guardar nuevos datos. (Dejé un comentario allí)
Lo siento, mi inglés no es el mejor.
function init() { document.getElementById("0").innerHTML = "example value"; document.getElementById("0").style.float = "center"; document.getElementById("0").style.width = "70%"; document.getElementById("0").style.border = "10px"; document.getElementById("0").style.textAlign = "center"; } function again() { document.getElementById("0").innerHTML = ""; //reset current value //we create new input via js var newInput = document.createElement('input'); newInput.type = "text"; newInput.id = "newValue"; //we create new button to save data var button2 = document.createElement('input'); button2.type = 'button'; button2.id = 'save'; button2.value = 'Save new value'; document.getElementById('again').style.display = "none"; // we hide i var container = document.getElementById('container'); //container container.appendChild(newInput); container.appendChild(button2); button2.onclick = function() { //here goes ur code to save new value //.............. //after saving ur new values u should show it document.getElementById("0").innerHTML = document.getElementById("newValue").value; // show "again btn" document.getElementById('again').style.display = "block"; //delete new input and button var input1 = document.getElementById("newValue"); var button1 = document.getElementById("save"); input1.parentNode.removeChild(input1); button1.parentNode.removeChild(button1); }; } <body onload="init();"> <table style="float: right ; padding-left: 10px;" id="table"> <tr> <th style="padding-left:24px; text-align: center;" class="button" id="0"><input id="inside" name="inside" type="text" disabled></th> </tr> </table> <h1 style="font-family: head; text-align: center; text-decoration: underline;">tasks</h1> <button id="again" onclick="again();">again</button> <div id="container"></div> </body>El usuario no puede escribir nada al principio, así que haz esto:
window.onload = function() { document.getElementById("inside").disabled = 'false'}Cómo borrar el título
localStorage.removeItem('título')
Intenta usar removeAttribute() para esto
function init() { document.getElementById("0").innerHTML = localStorage.a; document.getElementById("0").style.float = "center"; document.getElementById("0").style.width = "70%"; document.getElementById("0").style.border = "10px"; document.getElementById("0").style.textAlign = "center"; } // new code function again() { document.getElementById("inside").removeAttribute("disabled"); } <body onload="init();"> <table id="table"> <tr> <th class="button" id="0"> <input id="inside" name="inside" type="text" disabled> </th> </tr> </table> <h1>tasks</h1> <button onclick="again();">again</button> </body>En la función otra vez (), agregué algo que eliminaría el atributo deshabilitado del cuadro de texto de entrada, por lo que cuando se hace clic en el botón, debería permitir al usuario editar el cuadro de entrada. Espero que esto te haya ayudado, dime si no funcionó e intentaré solucionar el problema.