How to enable HTML input field from Javascript
Question
I'm using localStorage to save string so the user could enter title and it will be saved for the next times. I want to add a button that will delete the displayed text (the localstorage) and enable the input field, so the user could write another title. I thought about "creating" HTML input from JS, so the title removes and there's input field. Is it the right way? is it another way doing it?
Actually, I don't know what should I write in again(){} Thanks a lot!
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>
3 answers
solution1
0 2022-02-15 21:09:51
Not sure if this is what you'r looking for...
Creating HTML content using JS could be one way of doing it, just like this.
Another way is having your input and button to save new data hidden, and then just show and hide them if needed, instead of creating them every time.
(having them just hidden would be better for performance, in this simple case I wouldn't be worried about that).
I changed your stored data for "example data".
You need to add a code line to save new data. (I left a comment there)
Sorry my English is not the best.
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>
solution2
0 2022-04-21 20:09:52
The User can't write anything at beginning, so do this:
window.onload = function() { document.getElementById("inside").disabled = 'false'}How to delete title
localStorage.removeItem('title')
solution3
0 2022-04-21 20:11:55
Try using removeAttribute() for this
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>
In the again() function, I added something that would remove the disabled attribute of the input text box, so when the button is clicked it should allow the user to edit the input box. Hope this helped you, tell me if it did not work and I will try to solve the problem.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.