Javascript - klonen ein div nach Benutzereingabe auf Menge

Question

Ich versuche, ein div zu klonen, nachdem ein Benutzer in der Menge der divs geklont wird. Der Benutzer wird eine Zahl eingeben (sagen wir 3) und die Funktion erzeugt drei group-container divs. Die Eingabeaufforderung funktioniert, aber danach passiert nichts. Scheint ziemlich einfach, aber es entgeht mir. Ist meine Logik falsch? Offensichtlich sind meine Programmierkenntnisse sehr neu.

1. ich eine Funktion, die den Eingang (groupInput)
2. eine for-Schleife zu schaffen, hat die folgende Anweisung

3. Die wiederholen for-Schleife wird klonen group-container so oft wie 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); 
       } 
   } 
   

Alle Vorschläge würden sehr geschätzt werden.

Aktualisiert

Danke für die Vorschläge, erhalte ich, ich sollte jetzt Klasse für diese.

Ich habe es mit der ID in jsfiddle arbeiten (nicht sicher, warum es nicht in meinem HTML ist), aber jetzt mit der Klasse ist es nicht: https://jsfiddle.net/waynebunch/c5sw5dxu/. getElementsByClassName ist gültig, richtig?

Answer 1

Sie sollten die Gruppendeklaration außerhalb der for-Schleife platzieren, damit der Klon während der Schleife unverändert bleibt.

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

Die prompt() Methode gibt wahrscheinlich die richtige Zahl, aber mit Typ auf String festgelegt. Stattdessen versuchen

Um den Wert in eine Zahl zu konvertieren, die die FOR-Schleife ordnungsgemäß ausgeführt werden soll.

Answer 3

So etwas wie die folgenden funktionieren könnte, wenn Sie Ihre Quantität erhalten in einer Eingabeaufforderung oder Texteingabe.

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