javascript - 如何使用js在html中添加n个输入字段

Question

我必须获取“n”——用户的姓名总数，然后创建 n 个字段来获取所有姓名。我目前将其写为:

HTML 代码:

<form action="/flight_ticket/book" name="myform" method="post">
  .
  .
  .
  Enter the number of tickets to be booked:
  <input name="nooftickets" type="text"><br/><br/>
  <a href="#" id="names" onclick="addFields();">Enter names</a>
  <div id='container'/>
  </div>
  <br/><br/>
</form>
</body>

JS代码:

function addFields(){
    var number = parseInt(document.getElementById("nooftickets").value);
    var container = document.getElementById("container");
    while (container.hasChildNodes()) {
      container.removeChild(container.lastChild);
    }
    for (i=0;i<number;i++){
      container.appendChild(document.createTextNode("Name " + (i+1)));
      var input = document.createElement("input");
      input.type = "text";
      input.name = "name" + i;
      //input.required= true;
      container.appendChild(input);
      container.appendChild(document.createElement("br"));
    }
}

但是当我在浏览器上运行它时，单击“输入名称”后，我在浏览器中没有看到任何变化!我做错了什么？

Answer 1

您正在做的是尝试获取 noofticktes 的值，该值在 HTML 中定义为 name 但在您的代码中，您正在使用 document.getElementById('noofticktes').value 抛出 undefined 错误，因为没有 id 定义为 noofticktes。因此，只需将代码更改为:

var number = document.getElementById("nooftickets").value;

对此:

var number = document.getElementsByName("nooftickets")[0].value;

您将能够使您的代码正常工作。

代码中的一个小更新是，如果您尝试清除/删除元素 container 的所有内容，只需使用 container.innerHTML='' 即可循环并删除每个元素。

这是更新后的代码片段。

function addFields() {
  debugger;
  var number = document.getElementsByName("nooftickets")[0].value;
  var container = document.getElementById("container");
  container.innerHTML = '';
  for (i = 0; i < number; i++) {
    container.appendChild(document.createTextNode("Name " + (i + 1)));
    var input = document.createElement("input");
    input.type = "text";
    input.name = "name" + i;
    //input.required= true;
    container.appendChild(input);
    container.appendChild(document.createElement("br"));
  }
}

<form action="/flight_ticket/book" name="myform" method="post">
  . . . Enter the number of tickets to be booked:
  <input name="nooftickets" type="text"><br/><br/>
  <a href="#" id="names" onclick="addFields();">Enter names</a>
  <div id='container' />
  </div>
  <br/><br/>
</form>