Клонировать div в зависимости от числа, представленного

Question

Я хотел бы знать, как клонировать мой div в зависимости от числа, представленного пользователем. Если он войдет в 3 и нажимает submit, он будет клонировать 3 div, если 42 ---> 42 div cloned и так далее. Кто-то может помочь?

На данный момент у меня есть кнопка, которая клонирует мой div каждый раз, когда я нажимаю его.

Заранее спасибо.

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

Создать numer вход, чтобы получить счет. Вы можете добавить max и min, чтобы ограничить количество. Получите значение этого при нажатии submit. Используйте этот count для повторного повторного клонирования, используя простой цикл for.

Также старайтесь использовать class вместо id для change как id должны быть уникальными. При клонировании вы получаете разные элементы с одинаковым идентификатором, что является недопустимым HTML.

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

многостраничного функции() нужно добавить для заявления asSiam говорит.

Пример:

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"> 

Получить число от входного тега и операций клонирования петли, что много раз.

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()" >