Javascript-用户输入数量后克隆div

Question

我正在尝试在用户放入要克隆的div数量之后克隆div。 用户将输入一个数字（例如3），该函数将创建三个group-container div。 该提示有效，但此后没有任何反应。 看起来很简单，但是却在逃避我。 我的逻辑不正确吗？ 显然我的编程技能是非常新的。

1. 我创建一个具有输入（groupInput）的函数
2. 创建一个for循环以重复以下说明

3. for循环将克隆group-container次数与i<groupInput

    function addGroup() { var groupInput = prompt("How many groups? 1-100"); for(i=0; i<groupInput; i++){ var group = document.getElementById("group-container"); var clone = group.cloneNode(true); group.parentNode.appendChild(clone); } } 

任何建议将不胜感激。

更新

感谢您的建议，我现在应该为此使用类。

我确实让它与jsfiddle中的ID配合使用（不确定为什么它不在我的html中），但是现在与类无关： https : //jsfiddle.net/waynebunch/c5sw5dxu/ 。 getElementsByClassName有效吗？

Answer 1

您应该将组声明放在for循环之外，以便克隆在整个循环中保持不变。

小提琴

function addGroup() {
   var groupInput = prompt("How many groups?  1-100");
   var group = document.getElementById("group-container");
   for(i=0; i<groupInput; i++){     
     var clone = group.cloneNode(true);
     group.parentNode.appendChild(clone);
   }
 }

Answer 2

prompt()方法可能返回正确的数字，但类型设置为String。 试一试

parseInt(groupInput)

将值转换为数字，这应允许for循环正确执行。

Answer 3

从提示或文本输入中获取数量后，如下所示的内容可能会起作用。

var doc = document;

var input = prompt("Please enter your qty", "0");
if (input != null) {
    for (i = 0; i < input; i++) { 
        var elem = doc.createElement('div');
        elem.className = 'group-container';
    }
}