Clone ein div je nach der Anzahl der eingereichten

Question

Ich würde gerne wissen, wie mein div abhängig von der Zahl vom Benutzer geklont klonen. Wenn er 3 eingibt und auf "submit" drückt, klont das 3 div, wenn 42 div kloniert und so weiter. Jemand kann helfen?

Für jetzt habe ich nur eine Schaltfläche, die mein div jedes Mal klonen, wenn ich es drücke.

Vielen Dank im Voraus.

function colorDiv() { 
 
    \t var selection = document.getElementById('color').value; 
 
    \t var div = document.getElementById('change'); 
 
    \t 
 
    
 
    
 
    
 
    \t switch (selection) { 
 
    \t \t case "1": 
 
    \t \t div.style.backgroundColor = 'grey'; 
 
    \t \t break; 
 
    \t \t case "2": 
 
    \t \t div.style.backgroundColor = 'yellow'; 
 
    \t \t break; 
 
    \t \t case "3": 
 
    \t \t div.style.backgroundColor = 'blue'; 
 
    \t \t break; 
 
    \t \t case "4": 
 
    \t \t div.style.backgroundColor = 'red'; 
 
    \t \t break; 
 
    \t \t case "5": 
 
    \t \t div.style.backgroundColor = 'green'; 
 
    \t \t break; 
 
    \t } 
 
    } 
 
    
 
    function multi() { 
 
    
 
    \t var item = document.getElementById("change"); 
 
    \t var ligne = document.getElementById("br"); 
 
    \t var dupli = item.cloneNode(true); 
 
    \t var dupliLig = ligne.cloneNode(true); 
 
    \t document.body.appendChild(dupli); 
 
    \t document.body.appendChild(dupliLig); 
 
    }

<div id="change" style="height:200px; width:200px"></div> 
 
    <br id="br"> 
 
    <select id="color" onchange="colorDiv()"> 
 
    \t <option value=1>Grey</option> 
 
    \t <option value=2>Yellow</option> 
 
    \t <option value=3>Blue</option> 
 
    \t <option value=4>Red</option> 
 
    \t <option value=5>Green</option> 
 
    </select> 
 
    
 
    <input type="text" name=""> 
 
    <input type="submit" onclick= "multi()" >

Answer 1

erstellen numer Eingabe werden die bekommen. Sie können max und min hinzufügen, um die Anzahl zu begrenzen. Holen Sie sich den Wert, wenn Sie auf "Senden" klicken. Verwenden Sie diese count, um Ihr Klonen so oft zu wiederholen, indem Sie eine einfache for-Schleife verwenden.

Versuchen Sie auch, eine class anstelle von id für zu verwenden, da id muss eindeutig sein. Beim Klonen haben Sie verschiedene Elemente mit derselben ID, was ein ungültiger HTML-Code ist.

function colorDiv() { 
 
    var selection = document.getElementById('color').value; 
 
    var div = document.getElementById('change'); 
 
    switch (selection) { 
 
    case "1": 
 
     div.style.backgroundColor = 'grey'; 
 
     break; 
 
    case "2": 
 
     div.style.backgroundColor = 'yellow'; 
 
     break; 
 
    case "3": 
 
     div.style.backgroundColor = 'blue'; 
 
     break; 
 
    case "4": 
 
     div.style.backgroundColor = 'red'; 
 
     break; 
 
    case "5": 
 
     div.style.backgroundColor = 'green'; 
 
     break; 
 
    } 
 
} 
 

 
function multi() { 
 
    var item = document.getElementById("change"); 
 
    var count = +document.getElementById("count").value; 
 
    var ligne = document.getElementById("br"); 
 
    for (var i = 0; i < count; i++) { 
 
    var dupli = item.cloneNode(true); 
 
    var dupliLig = ligne.cloneNode(true); 
 
    document.body.appendChild(dupli); 
 
    document.body.appendChild(dupliLig); 
 
    } 
 
} 
 

 
window.onload = colorDiv;

<div id="change" style="height:200px; width:200px"></div> 
 
<br id="br"> 
 
<select id="color" onchange="colorDiv()"> 
 
    \t <option value=1>Grey</option> 
 
    \t <option value=2>Yellow</option> 
 
    \t <option value=3>Blue</option> 
 
    \t <option value=4>Red</option> 
 
    \t <option value=5>Green</option> 
 
    </select> 
 

 
<input type="number" id="count" min="1" max="100" value="1" /> 
 
<input type="submit" onclick="multi()">

Answer 2

In Ihrem multi() Funktion müssen Sie Anweisung, um eine hinzuzufügen ist asSiam sagen.

Beispiel:

function multi() { 
var times = parseInt($("input[type='text']").val()); 
for (var i = 0; i < times; i++) { 
    var item = document.getElementById("change"); 
    var ligne = document.getElementById("br"); 
    var dupli = item.cloneNode(true); 
    var dupliLig = ligne.cloneNode(true); 
    document.body.appendChild(dupli); 
    document.body.appendChild(dupliLig); 
} } 

Answer 3

<input type="text" name="" id="times"> 

Erhalten der Anzahl von Eingangs-Tag und Loop-Duplizierung, die viele Male.

function multi() { 
    var times = parseInt(document.getElementById("times").value); 
    for(i=0;i<times;i++){ 
     var item = document.getElementById("change"); 
     var ligne = document.getElementById("br"); 
     var dupli = item.cloneNode(true); 
     var dupliLig = ligne.cloneNode(true); 
     document.body.appendChild(dupli); 
     document.body.appendChild(dupliLig); 
     } 
    } 

function colorDiv() { 
 
    \t var selection = document.getElementById('color').value; 
 
    \t var div = document.getElementById('change'); 
 
    \t 
 
    
 
    
 
    
 
    \t switch (selection) { 
 
    \t \t case "1": 
 
    \t \t div.style.backgroundColor = 'grey'; 
 
    \t \t break; 
 
    \t \t case "2": 
 
    \t \t div.style.backgroundColor = 'yellow'; 
 
    \t \t break; 
 
    \t \t case "3": 
 
    \t \t div.style.backgroundColor = 'blue'; 
 
    \t \t break; 
 
    \t \t case "4": 
 
    \t \t div.style.backgroundColor = 'red'; 
 
    \t \t break; 
 
    \t \t case "5": 
 
    \t \t div.style.backgroundColor = 'green'; 
 
    \t \t break; 
 
    \t } 
 
    } 
 
    
 
    function multi() { 
 
    var times = parseInt(document.getElementById("times").value); 
 
    for(i=0;i<times;i++){ 
 
    \t var item = document.getElementById("change"); 
 
    \t var ligne = document.getElementById("br"); 
 
    \t var dupli = item.cloneNode(true); 
 
    \t var dupliLig = ligne.cloneNode(true); 
 
    \t document.body.appendChild(dupli); 
 
    \t document.body.appendChild(dupliLig); 
 
     } 
 
    }

<div id="change" style="height:200px; width:200px"></div> 
 
    <br id="br"> 
 
    <select id="color" onchange="colorDiv()"> 
 
    \t <option value=1>Grey</option> 
 
    \t <option value=2>Yellow</option> 
 
    \t <option value=3>Blue</option> 
 
    \t <option value=4>Red</option> 
 
    \t <option value=5>Green</option> 
 
    </select> 
 
    
 
    <input type="text" name="" id="times"> 
 
    <input type="submit" onclick= "multi()" >