title: Dynamically change table cell with user input in Javascript
body: <p>This is what I'm trying to do: I have a table, created from Javascript with user input in each cell.  This table is just to confirm that the data entered by the user is correct. If the user sees an error, they click on the cell which needs editing, and it puts a textbox in the table cell with the current cell data. The user will then be able to submit changes or discard the changes if they clicked on the wrong cell. This is currently what I have:</p>
  
  <pre><code>    &lt;table id = "confirm"&gt;
        &lt;tr&gt;&lt;th&gt;Firstname&lt;/th&gt;&lt;td id = "txtFirstname" onclick = "update(this.id)"&gt;Adan&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;th&gt;Lastname&lt;/th&gt;&lt;td&gt;Smith&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;th&gt;Username&lt;/th&gt;&lt;td&gt;ASmith&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;th&gt;Email&lt;/th&gt;&lt;td&gt;abc@123.com&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;th&gt;Phone&lt;/th&gt;&lt;td&gt;123-456-7890&lt;/td&gt;&lt;/tr&gt;
      &lt;/table&gt;
  
  &lt;script type = "text/javascript"&gt;
    function update(id){
      //Get contents off cell clicked
      var content = document.getElementById(id).firstChild.nodeValue;
      //Switch to text input field
      document.getElementById(id).innerHTML = "&lt;input type = 'text' name = 'txtNewInput' id = 'txtNewInput' value = '" + content + "'/&gt;";
    }
  &lt;/script&gt;
  </code></pre>
  
  <p>This is what my current code does: When user clicks on the cell, it replaces it with the current text inside a textbox, which is great, but when you try to edit the text, it calls the function over again replacing the text with "null". Please help me figure this out! </p>