javascript - 如何根据先前的输入类型范围值创建 'x' 数量的输入类型文本？

Question

我想根据用户先前选择的输入范围值创建一定数量的输入。

这是输入范围:

<div class="line1">

<h4>Quantity</h4>

<input type="range" min="3" max="20" class="form-control" name="qtd" oninput="display.value=value" onchange="display.value=value">

<input type="text" id="display" readonly class="form-control">

</div>

有了这个值，我想创建更多的这对输入(它们都是，每对都在彼此下面):

<div class="line1-1">

<h4>Tag</h4>
<input type="text" class="form-control" name="etiqueta" placeholder="Etiqueta" autocomplete="off" required>

</div>

<div class="line1-1">

<h4>Num</h4>
 <input type="text" class="form-control" placeholder="Número de Série" autocomplete="off" id="modelo" name="modelo" required>

</div>

Answer 1

我会将您要复制的两个 div 分组到一个 div 中，并将其显示属性设置为none。

<div id="master" style="display:none;">
  <div class="line1-1">
    <h4>Tag</h4>
    <input type="text" class="form-control" name="etiqueta" placeholder="Etiqueta" autocomplete="off" required>
  </div>
  <div class="line1-1">
    <h4>Num</h4>
    <input type="text" class="form-control" placeholder="Número de Série" autocomplete="off" id="modelo" name="modelo" required>
  </div>
</div>

通过这种方式，div 充当一个不可见的模板，您可以使用 cloneNode() 方法简单地进行克隆，并将克隆附加到一个空的 div 容器中。

这是一个例子:

function process(e) {
  document.getElementById("display").value = e.target.value;
  document.getElementById("duplicates").innerHTML = "";

  var clone;
  for (var a = 0; a < parseInt(e.target.value); a++) {
    clone = document.getElementById("master").cloneNode(true);
    clone.setAttribute("style", "");
    document.getElementById("duplicates").appendChild(clone);
  }
}
document.getElementById("qtd").addEventListener("input", process);
document.getElementById("qtd").addEventListener("change", process);

<div class="line1">
  <h4>Quantity</h4>
  <input type="range" min="3" max="20" class="form-control" name="qtd" id="qtd">
  <input type="text" id="display" readonly class="form-control">
</div>
<div id="master" style="display:none;">
  <div class="line1-1">
    <h4>Tag</h4>
    <input type="text" class="form-control" name="etiqueta" placeholder="Etiqueta" autocomplete="off" required>
  </div>
  <div class="line1-1">
    <h4>Num</h4>
    <input type="text" class="form-control" placeholder="Número de Série" autocomplete="off" id="modelo" name="modelo" required>
  </div>
</div>
<div id="duplicates">