Question

我想知道如何在JS中使用循环创建许多<input type=text />标签。

我需要将该循环链接到第一个输入（type=number），第一个输入告诉循环要创建多少个输入文本。

function getP () {
  var nbP = Number(document.getElementById("nombreP").value);

  for (var i = 0; i < nbP; i++) {
      var newForm = document.createElement("input[type=text]");
          newForm.id = "form"+i
      document.body.appendChild(newForm);
  }
}

<form method="get">
    <input type="number" name="nombrePlat" id="nombreP">
    <input type="submit" value="Envoyer" id="ok" onclick="getP()">
</form>

Answer 1

直接回答您的问题：

<script type="text/javascript">
function getP() {
    var nbP = +document.getElementById("nombreP").value;
    var inputContainer = document.getElementById("inutContainer");

    for (var i = 0; i < nbP; i++) {
        var newForm = document.createElement("input");
        newForm.setAttribute("type", "text");
        newForm.setAttribute("id", "form"+i);
        inputContainer.appendChild(newForm);
        inputContainer.appendChild(document.createElement("br"));
    }
}
</script>
<form>
    <input type="number" name="nombrePlat" id="nombreP">
    <input type="button" value="Envoyer" id="ok" onclick="getP()">
    <div id="inutContainer">
</div>
</form>

但是：这是学习Javascript和HTML的好问题，但创建功能强大的UI却很困难。要在JS / HTML中实现现代UI，我强烈建议您了解更多有关下一代技术的信息：

https://reactjs.org/或https://angular.io/或https://vuejs.org/

Answer 2

我希望它能对您有所帮助：

document.querySelector('#ok').addEventListener('click', getP)

function getP(event) {
  let inputsQtt = document.querySelector('input[type=number]').value
  for (let i = 0; i < inputsQtt; i++) {
    let input = document.createElement("input");
    document.body.appendChild(input);
  }
}

<form method="get">
  <input type="number" name="nombrePlat" id="nombreP">
  <input type="button" value="Envoyer" id="ok">
</form>

Answer 3

您的代码几乎没有问题首先：语法错误，您缺少1个大括号}以关闭功能。

第二个更重要的一点是，单击按钮会导致提交表单并刷新页面。要解决此问题，您只需将按钮的类型从“提交”更改为“按钮”即可。

而且您也不能使用“ input [type = text]”创建元素。您可以使用以下代码创建元素

function getP () {
    var nbP = Number(document.getElementById("nombreP").value);
    for (var i = 0; i < nbP; i++) {
        var newForm = document.createElement("input");
        newForm.id = "form"+i;
        newForm.setAttribute("type","text");
        document.body.appendChild(newForm);      
    }
}

Answer 4

这是一种略有不同的方法，涉及在表单中添加包装容器。

function updateForm() {

  var parent = document.getElementById('inputs'),
      count = document.getElementById('inputCount').value || 0;
  
  parent.innerHTML = '';
  
  for (let i = 0; i < count; i++) {
    parent.innerHTML += `<input placeholder="text input ${i+1}" name="form${i+1}" id="form${i+1}" /><br>`;
  }
  
  
}

<form method="get" name="inputForm">
    <input min="0" type="number" name="inputCount" id="inputCount">
  
    <div id="inputs">
       <!-- container for dynamic inputs -->
    </div>

</form>

<!-- Notice inputs can also be associated to form with `form` attribute -->
<input form="inputForm" type="submit" value="Make" id="ok" onclick="updateForm()">

使用循环js创建输入文本

4 个答案: