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

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

我创建具有输入（groupInput）
创建一个for循环重申下述指令

的函数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有效吗？

来源

2016-05-12 Wayne Bunch

这看起来像是错误的方法来解决谁知道什么。你最终会在dom中拥有多个相同的'id'节点。那味道很有趣。 –

其实它似乎在这里工作︰https://jsfiddle.net/briosheje/70wn3oah/（这是可怕的，但不重复id！） – briosheje

@CrescentFresh明白了，将改变 –

您应该将组声明放在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); 
    } 
}

来源

2016-05-12 17:33:36 IrkenInvader

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

parseInt(groupInput)

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

来源

2016-05-12 17:31:44 Pandaqi

for循环应该仍然工作，如果你给它一个字符串 – IrkenInvader

你是对的，愚蠢的我忘记了。无论哪种方式，我认为最好将其转换为整数以保证安全。 – Pandaqi

真的！绝对好的做法，先转换它。 – IrkenInvader

喜欢的东西的，一旦你从一个提示或文本输入让您的量低于可能会奏效。

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

来源

2016-05-12 17:38:36

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

回答

相关问题