Question

我必须得到＆＃39; n＆＃39; - 来自用户的名称总数，然后创建n个字段以获取所有名称。我目前将其写成：

HTML code：

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"));
    }
}

JS代码：

Project1 => project1.com/apidoc
Project2 => project2.com/apidoc

但是当我在浏览器上运行它时，点击＆＃34;输入名称＆＃34;后，我在浏览器中看不到任何变化！我有什么问题？

Answer 1

您正在尝试获取在HTML中定义为noofticktes的{{1}}的值，但在您的代码中，您使用的是name document.getElementById('noofticktes').value错误，因为undefined未定义为id。所以，只需更改代码：

noofticktes

对此：

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

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

如果您尝试清除/删除元素var number = document.getElementsByName("nooftickets")[0].value;的所有内容，只需使用container而不是循环并删除每个元素，代码中的一个小更新就是。

以下是您的代码的更新代码段。

＆＃13;

container.innerHTML=''

＆＃13;

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"));
  }
}

＆＃13;

Answer 2

＆＃13;

function addFields() {
		// body...
		var input = '';
		var number = document.getElementById('number').value;
		for(var i=0;i<number;i++)
		{
			input +="<input id='number"+i+"' name='number"+i+"'><br>";
		}
		document.getElementById('container').innerHTML = input;
		
	}

＆＃13;

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

＆＃13;

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

2 个答案: