如何使用onclick[duplicate]增加html中的元素数

Question

我这里有一个div

 <div id='myDiv'>

 </div>

和一个输入文本的按钮

  <input id='myNumber' type='text'>
  <button id=myBtn''>Multiply</button>

我的脚本添加一个点击

 <script>
 var myDiv = document.getElementById(''myDiv");
 var myNumber = 
 document.getElementById(''myNumber");
 var myBtn = document.getElementById(''myBtn");
 myBtn.onclick = function(){

       }
  </script>

如果myText中的值为5，我如何在myDiv中插入5个输入类型的文本

Answer 1

您可以直接在按钮元素上使用onclick（）函数。另外，检查负值以防止在div上添加元素。

function addElement() {
  let count = document.getElementById('myNumber').value;;
  if (!isNaN(count) && count > 0) {
    myDiv.innerHTML = "";
    for (let i = 0; i < count; i++) {
      let div = document.createElement('input');
      myDiv.append(div);
    }
  }
};

html lang-html prettyprint-override"><div id='myDiv'>
</div>
<input id='myNumber' type='text'>
<button id='myBtn' onclick="addElement()">Multiply</button>

Answer 2

您可以获取计数并使用append（）将输入添加到#myDIv。请参阅下面的代码片段。

var myDiv = document.getElementById('myDiv');
var input = document.getElementById('myNumber');

function addInput() {
  let count = parseInt(input.value);
  if (!isNaN(count)) {
    myDiv.innerHTML = "";
    for (let i = 0; i < count; i++) {
      let input = document.createElement('input');
      input.type = "text";
      myDiv.append(input);
    }
  }
}

<div id='myDiv'>

</div>

<input id='myNumber' type='text'>
<button onclick="addInput()">Multiply</button>