根据提交的数量克隆一个 div

Question

我想知道如何根据用户提交的数字克隆我的 div。如果他输入 3 并按提交，这将克隆 3 div，如果 42 ---> 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

创建一个numer 输入以获取计数。您可以添加max 和min 来限制计数。单击提交时获取此值。使用这个count 使用简单的for 循环多次迭代您的克隆。

还可以尝试使用class 而不是id 来表示change，因为id 需要是唯一的。克隆时，您最终会得到具有相同 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()">
    	<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="number" id="count" min="1" max="100" value="1" />
<input type="submit" onclick="multi()">

Answer 2

在您的 multi() 函数中，您需要添加一个 For 语句，正如Siam 所说。

例子：

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

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