如何使用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" />'