根據提交的數字克隆一個div

Question

我想知道如何根據用戶提交的數字克隆我的div。如果他輸入3並按提交，這將克隆3格，如果42 - > 42格克隆等。有人可以幫忙嗎？

現在我只是有一個按鈕，克隆我的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來限制計數。點擊提交即可獲得此值。使用這個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

在你的多（）函數，你需要添加一個For語句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()" >