如何在 html/javascript 上创建动态文本框时保存值并传递它

Question

我正在用 javascript 做一个动态文本框。但是当我执行我的按钮时，我已经插入的值被删除了。因此，如果我有一个文本框并在上面输入内容，当我执行按钮创建另一个文本框时，它会清除我在第一个文本框上输入的所有内容，并创建另一个文本框。我明白为什么会这样，但我不知道是否有办法保持价值，并传递给“新”div。

    <script language="javascript">
var x = 1;
function Button()
{
my_div.innerHTML = my_div.innerHTML +"<label for='variation'>Carro " + x +": </label>" + "<input type='text' name='xcar"+ x +"'>"
x++;
}
</script>

Answer 1

所以我之前说的问题是 my_div.innterHTML 正在替换自己并失去价值。

<script language="javascript">
window.onload = function  () {
  
  var createTextbox = function () {
    var x = 1,
        container = document.getElementById('my_div');
      
    return function () {
      var div = document.createElement('div');
          input = document.createElement('input');
      input.type= "text";
      input.name = "xtext" + x;
      div.appendChild(input);
      container.appendChild(div);
      x++;
    }
  }();

  document.getElementById('createButton').onclick = createTextbox;
</script>

<input class="carbutton" type="button" value="+ Carro" id="createButton">

我只是改用了这段代码。

如何在 html/javascript 上创建动态文本框时保存值并传递它

How to hold a value and pass it while creating dynamic textbox on html/javascript

html

javascript

dynamic