根据提交的数量克隆div

Question

我想知道如何根据用户提交的数量克隆我的div。如果他输入3并按提交，则将克隆3 div，如果42 ---＆gt; 42 div克隆等等。有人可以帮忙吗？

现在我只有一个按钮，每次按下它时克隆我的div。

提前致谢。

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 ligne = document.getElementById("br");
    	var dupli = item.cloneNode(true);
    	var dupliLig = ligne.cloneNode(true);
    	document.body.appendChild(dupli);
    	document.body.appendChild(dupliLig);
    }

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

Answer 1

在你的multi（）函数中，你需要添加一个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 2

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;