'How to enable HTML input field from Javascript

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>
javascripthtml


Solution 1:[1]

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>

Solution 2:[2]

  1. The User can't write anything at beginning, so do this:

     window.onload = function() {
 document.getElementById("inside").disabled = 'false'}

  2. How to delete title

    localStorage.removeItem('title')

Solution 3:[3]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 marc_s
Solution 2 aWebDesigner123
Solution 3 Infui0ayaan

Related Questions