javascript - 我正在使用 for 循环打印表单输入的输出，但输入表单不断添加自身

Question

所以我得到了关于表格中 child 数量的输入。如果有 2 个 child ，那么在我单击按钮后应该弹出两个表单，如果是 4，则 4。但是我的 for 循环不起作用，出于某种原因，无论我单击多少次，表单的值都会不断增加自身按钮，当它应该在超过限制时停止时，它会无限地继续添加。

function numbchild() {
  z = document.form2;
  ax = z.no_child.value;
  var i;
  for (i = 0; i < parseInt(ax); i++) {
    console.log(ax);
    document.getElementById('xx').insertAdjacentHTML(
      "afterbegin",
      "Enter student 's name:   <input type='text ' name='s_name'><br />"
    );
  }
}

<form name="form2">
  how many children?: <input type="text" name="no_child" size="20" required><br />
  <input type="button" name="test" onclick="numbchild()">
  <p id="xx"></p>
</form>

Answer 1

如果您的意思是第二次(第三次、第四次)使用按钮添加输入而不是调整那里的总数，那么您的试图避免这种情况的代码。您正在添加输入的数量。

您可以找出有多少并针对它进行调整，请参阅评论:

function numbchild() {
  var z = document.form2;               // *** Added `var`
  var ax = parseInt(z.no_child.value);  // *** Added `var`, parse it just once here
  // *** Get the parent element
  var parent = document.getElementById('xx');
  // *** Get its existing inputs
  var inputs = parent.querySelectorAll("div.input");
  if (inputs.length < ax) {
    // Need to add some
    ax -= inputs.length; // Allow for the ones we already have
    var i;
    for (i = 0; i < ax; i++) { // *** Don't parse it here
      // *** Note wrapping the inputs in divs so
      // its' easy to remove them (and that gives
      // us the line break as well)
      parent.insertAdjacentHTML(
        "beforeend", // *** Add them at the end, not the beginning
        "<div class=input>Enter student 's name:   <input type='text ' name='s_name'></div>"
      );
    }
  } else if (inputs.length > ax) {
    // Need to remove some
    ax = inputs.length - ax;
    while (ax--) {
      parent.removeChild(inputs[inputs.length-1]);
    }
  }
}

<form name="form2">
  how many children?: <input type="text" name="no_child" size="20" required><br />
  <input type="button" name="test" onclick="numbchild()">
  <p id="xx"></p>
</form>