Javascript - 量のユーザ入力の後にdivをクローン化

Question

私はdivをクローン化する量を入れた後にdivをクローンしようとしています。ユーザーは数字（例えば3）を入力し、関数は3つのgroup-container divを作成します。プロンプトは機能しますが、その後は何も起こりません。かなりシンプルだが、それは私を回避している。私の論理は間違っていますか？明らかに私のプログラミングスキルは非常に新しいです。私は、forループの次の命令

ザ・を繰り返すためにループのための入力（groupInput）

を作成した関数は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); 
    } 
} 

として group-containerな回数のクローンを作成します作成

ご提案いただければ幸いです。提案のため

更新

おかげで、私は今、このためにクラスを使用する必要があり得ます。

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