使用for循環生成的文本框

Question

我希望能夠進入一個數字，一個文本框，然後點擊一個按鈕生成另一個div標籤，這個數字的文本框，並自動分配ID

喜歡的東西這一點，但不知道如何生成的文本框，並指定自動分配的ID

function textBox(selections) { 

    for (i=0; i < selections +1; i++) { 
     document.getElementById('divSelections').innerHTML = ("<form><input type="text" id="1" name=""><br></form>"); 
    } 

} 

Answer 1

嘗試這一個：

function textBox(selections){ 
    selections = selections*1; // Convert to int 
    if(selections !== selections) throw 'Invalid argument'; // Check NaN 
    var container = document.getElementById('divSelections'); //Cache container. 

    for(var i = 0; i <= selections; i++){ 
     var tb = document.createElement('input'); 
     tb.type = 'text'; 
     tb.id = 'textBox_' + i; // Set id based on "i" value 
     container.appendChild(tb); 
    } 
} 

Answer 2

請參見下面的代碼示例：

<asp:TextBox runat="server" ID="textNumber"></asp:TextBox> 
<input type="button" value="Generate" onclick="textBox();" /> 
<div id="divSelections"> 
</div> 
<script type="text/javascript"> 
    function textBox() { 
     var number = parseInt(document.getElementById('<%=textNumber.ClientID%>').value); 

     for (var i = 0; i < number; i++) { 
      var existingSelection = document.getElementById('divSelections').innerHTML; 
      document.getElementById('divSelections').innerHTML = existingSelection + '<input type="text" id="text' + i + '" name=""><br>'; 
     } 
    } 

</script> 

注：以上代碼將根據文本框中提供的編號生成N數量的文本框。

Answer 3

它不建議用戶innerHTML的一個循環：

使用，而不是：

function textBox(selections) { 
    var html = ''; 
    for (i=0; i < selections +1; i++) { 
     html += '<form><input type="text" id="'+i+'" name=""><br></form>'; 
    } 
    document.getElementById('divSelections').innerHTML = html; 
} 

而當你使用字符串

Answer 4

ID應手動生成要小心用單引號和雙引號。

var inputName = 'divSelections_' + 'text'; 
for (i=0; i < selections +1; i++) { 

    document.getElementById('divSelections').innerHTML = ("<input type='text' id= " + (inputName+i) + " name=><br>"); 
} 

編輯：代碼格式化

Answer 5

你必須改變一些代碼片段而產生texboxes，瞭解使用+連接操作符的，請檢查下面的代碼

function textBox(selections) { 
    for (var i=1; i <= selections; i++) { 
     document.getElementById('divSelections').innerHTML += '<input type="text" id="MytxBox' + i + '" name=""><br/>'; 
    } 
} 
textBox(4); //Call function 

JS Fiddle

一些要點照顧：

1）爲循環聲明i與var i
2）你的selection + 1是不是好的做法可言，你可以根據循環的盯着變量值
3）+=被追加總是處理<=和<您的新HTML到現有的HTML。

Answer 6

一種簡單的方法，其允許被傳遞或用於輸入元件的數目被使用：

document.getElementById('create').addEventListener('click', function(e){ 
    e.preventDefault(); 
    appendInputs(); // no number passed in 
}); 

：

function appendInputs(num){ 
    var target = document.getElementById('divSelections'), 
     form = document.createElement('form'), 
     input = document.createElement('input'), 
     tmp; 
    num = typeof num == 'undefined' ? parseInt(document.getElementById('number').value, 10) : num; 
    for (var i = 0; i < num; i++){ 
     tmp = input.cloneNode(); 
     tmp.id = 'input_' + (i+1); 
     tmp.name = ''; 
     tmp.type = 'text'; 
     tmp.placeholder = tmp.id; 
     form.appendChild(tmp); 
    } 
    target.appendChild(form); 
} 

通過調用

JS Fiddle demo。

通過調用：

document.getElementById('create').addEventListener('click', function(e){ 
    e.preventDefault(); 
    appendInputs(12); 
}); 

JS Fiddle demo。

以上JavaScript是基於以下HTML：

<label>How many inputs to create: 
    <input id="number" type="number" value="1" min="0" step="1" max="100" /> 
</label> 
<button id="create">Create inputs</button> 

<div id="divSelections"></div> 

Answer 7

而不是使用的innerHTML的，我建議你有以下結構

HTML：

<input type="text" id="id1" /> 
<button id="but" onclick="addTextBox(this)">click</button> 
<div id="divsection"></div> 

JS：

function addTextBox(ops) { 
    var no = document.getElementById('id1').value; 
    for (var i = 0; i < Number(no); i++) { 
     var text = document.createElement('input'); //create input tag 
     text.type = "text"; //mention the type of input 
     text.id = "input" + i; //add id to that tag 
     document.getElementById('divsection').appendChild(text); //append it 
    } 
} 

JSFiddle