根据提交的数量克隆一个 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 循环将您的克隆迭代多次。

还尝试对 change 使用 class 而不是 id，因为 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() 函数中，您需要按照 Siam 的说法添加一个 For 语句。

示例：

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

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

Clone a div depending of the number submitted

html

javascript

forms

onsubmit