Question

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

我创建了一个具有输入（groupInput）
创建一个for循环以重复以下指令

for循环将group-container克隆i<groupInput次数<{1}}

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循环之外，以便克隆在整个循环中保持不变。

Fiddle

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';
    }
}

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

3 个答案: