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

回答

相關問題