根据用户输入重复 div（首选 JavaScript 解决方案）

Question

寻找以下问题的最简单实现：

我有一个用户输入数字字段，例如：

<input type="number" id="numInput" name="numInput" value="1" onchange="myFunc()">

<div id="demo">*** TEST ***</div>

我想根据用户输入的#numInput 值复制#demo div，例如如果用户输入“5”，页面上将显示五个#demo div。目前，我正在使用以下功能：

function myFunc() {
  var newArray = [];
  var numInput = document.getElementById('numInput').value;
  var x = document.getElementById('demo').innerHTML;

  for(var i=0; i<numInput; i++) {
    newArray.push(x);
  }

  document.getElementById('demo').innerHTML = newArray;
}

但这是添加到现有数组中，而不是根据用户输入输出 div 的确切数量。请指教。谢谢。

Answer 1

不应有多个相同的 id 值。

function myFunc() {
  let numInput = document.getElementById("numInput");
  while (numInput.nextSibling) {
    numInput.nextSibling.remove();
  }
  
  let numInputval = document.getElementById('numInput').value;
  for(var i=numInputval; i>0; i--) {
    var newDiv = document.createElement('div');
    newDiv.setAttribute('id', 'demo' + i);
    newDiv.innerHTML = '*** TEST ***';
    numInput.parentNode.insertBefore(newDiv, numInput.nextSibling);
  }
}

<input type="number" id="numInput" name="numInput" onchange="myFunc()">

+编辑 您还可以使用 javascript 操作 <form>。

function myFunc() {
  let numInput = document.getElementById("numInput");
  while (numInput.nextSibling) {
    numInput.nextSibling.remove();
  }
  
  let numInputval = document.getElementById('numInput').value;
  for(var i=numInputval; i>0; i--) {
    var newInput = document.createElement('input');
    newInput.setAttribute('id', 'demoInput' + i);
    newInput.setAttribute('type', 'text');
    newInput.setAttribute('name', 'demoInputName' + i);
    newInput.setAttribute('onchange', 'myFormChangeListener(this)');
    numInput.parentNode.insertBefore(newInput, numInput.nextSibling);
    numInput.parentNode.insertBefore(document.createElement('br'), numInput.nextSibling);
  }
}

function myFormChangeListener(element) {
  console.log(element);
  console.log(element.value);
  myForm.action = 'http://the.url/';
  myForm.method = 'post';
  console.log(myForm);
  //myForm.submit;
}

<form id="myForm">
  <input type="number" id="numInput" name="numInput" onchange="myFunc()">
</form>