根據用戶輸入重復 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：

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

+Edit您還可以使用 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>