如何使用for循環在JavaScript中創建多個文本框？

Question

我想向動態創建的textbox添加textbox 。

var dynamicTextBox= "";
    for (var i = 0; i < vm.FitToWork.length; i++) {
        dynamicTextBox+= '<input class="form-control"  name = "DynamicTextBox"  id=  "DynamicTextBox"  type="text" value = "'vm.FitToWork[i]'" />&nbsp;' +
        '<button id="btnAdd"   class="delete-decl">+</button>';

    }
    document.getElementById("TextBoxContainer").innerHTML=dynamicTextBox;

它不工作..

Answer 1

您錯過了concat。

var dynamicTextBox= "";
for (var i = 0; i < vm.FitToWork.length; i++) {
    dynamicTextBox+= '<input class="form-control"  name = "DynamicTextBox"  id=  "DynamicTextBox"  type="text" value = "'+vm.FitToWork[i]+'" />&nbsp;' + '<button id="btnAdd"   class="delete-decl">+</button>';
}
document.getElementById("TextBoxContainer").innerHTML=dynamicTextBox;

Answer 2

您有語法錯誤。 您正在嘗試連接變量vm.FitToWork[i] ，但未使用連接運算符（ + ）。 嘗試以下代碼：

 var dynamicTextBox= ""; // ignore this. just have this to get the code working var vm = {FitToWork : ["test","rest","vest"]}; for (var i = 0; i < vm.FitToWork.length; i++) { dynamicTextBox += '<input class="form-control" name = "DynamicTextBox" id= "DynamicTextBox" type="text" value = "' + vm.FitToWork[i] + '" />'; dynamicTextBox += '<button id="btnAdd" class="delete-decl">+</button></br>'; } document.getElementById("TextBoxContainer").innerHTML = dynamicTextBox; 

 <div id="TextBoxContainer"></div> 

Answer 3

您忘了增加價值：

... value="' + vm.FitToWork[i] + '" ...

Answer 4

value應該在+ + value = "' + value + '"所以value = "'+vm.FitToWork[i]+'"

或者你可以嘗試這個

 '<input name = "DynamicTextBox" type="text" value = "' + value + '" />' +
 '<input type="button" value="+" id="btnAdd"   class="delete-decl" />'