javascript循环创建元素，一个接一个

Question

我无法找到我的问题的答案，在javascript初学者！

我想在循环中单击创建一个新的“INPUT”元素，限制为最多15个元素。

但是在我的代码下面，当我点击我的按钮时，他立刻创建了15个元素“INPUT”！

我正在尝试逐个创建它们，最多15个

---

HTML

<input class="objetInputSuivant" type="text" id="objetCampement_1" maxlength="18" placeholder="OBJET" onkeyup='this.value=this.value.toUpperCase()'>
<input class="poidsInputSuivant" type="number" id="poidsCampement_1" onkeyup="TotalCalcul(); limit(this);" placeholder="POIDS" onkeypress="return !(event.charCode == 46 || event.charCode == 44 || event.charCode == 188 || event.charCode == 190)">

<div id="AddChampCampement"></div>

   <button class="buttonAdd" type="button" width="295px" height="50px" onclick="NewInput()">AJOUTER UN OBJET</button>

   <input class="totalInput" type="number" id="totalCampement" value="0" readonly>

---

JAVASCRIPT

function NewInput() {

    let i;
    for (i = 0; i < 15; i++) {

        let Objet = document.createElement("INPUT");
        let Poids = document.createElement("INPUT");

        Objet.type = "text";
        Objet.className = "objetInput";
        Objet.placeholder = "OBJET";
        Objet.onkeyup = function() {
            this.value = this.value.toUpperCase();
        }
        Objet.maxLength = 18;

        document.getElementById("AddChampCampement").appendChild(Objet);

        Poids.type = "number";
        Poids.className = "poidsInput";
        Poids.placeholder = "POIDS";
        Poids.id = "poidsCampement_" + i;
        Poids.onkeypress = function() {
            return !(event.charCode == 46 || event.charCode == 44 || event.charCode == 188 || event.charCode == 190);
        }
        Poids.onkeyup = function() {
            limit(this);
        }

        document.getElementById("AddChampCampement").appendChild(Poids);

    }
}

Answer 1

此版本将i的当前值存储在闭包中。您也可以使用全局变量（不推荐），浏览器的localStorage（不太可能，但可能），或DOM中的隐藏位置，也可能在其他地方。

注意存储Immediately Invoked Function Expression (IIFE)的i并返回在范围内具有i的函数。

const NewInput = (function() {
  let i = 0;

  return function NewInput() {
    i++; // TODO: escape early if `i` is larger than 15
    let Objet = document.createElement("INPUT");
    let Poids = document.createElement("INPUT");

    Objet.type = "text";
    Objet.className = "objetInput";
    Objet.placeholder = "OBJET";
    Objet.onkeyup = function() {
      this.value = this.value.toUpperCase();
    }
    Objet.maxLength = 18;

    document.getElementById("AddChampCampement").appendChild(Objet);

    Poids.type = "number";
    Poids.className = "poidsInput";
    Poids.placeholder = "POIDS";
    Poids.id = "poidsCampement_" + i;
    Poids.onkeypress = function() {
      return !(event.charCode == 46 || event.charCode == 44 || event.charCode == 188 || event.charCode == 190);
    }
    Poids.onkeyup = function() {
      limit(this);
    }

    document.getElementById("AddChampCampement").appendChild(Poids);
  }

})()

const limit = function() {console.log('limit not implemented yet');}

<input class="objetInputSuivant" type="text" id="objetCampement_1" maxlength="18" placeholder="OBJET" onkeyup='this.value=this.value.toUpperCase()'>
<input class="poidsInputSuivant" type="number" id="poidsCampement_1" onkeyup="TotalCalcul(); limit(this);" placeholder="POIDS" onkeypress="return !(event.charCode == 46 || event.charCode == 44 || event.charCode == 188 || event.charCode == 190)">

<div id="AddChampCampement"></div>

   <button class="buttonAdd" type="button" width="295px" height="50px" onclick="NewInput()">AJOUTER UN OBJET</button>

   <input class="totalInput" type="number" id="totalCampement" value="0" readonly>

Answer 2

这应该使函数最多运行15次，但是在代码中一次添加两个输入字段，因此我将最大元素设置为30. ids将从1开始，每次递增2。我正在使用“AddChampCampement”中的子项数，因为它更新时没有设置任何全局值:)

function NewInput() {
  if(document.getElementById("AddChampCampement").childNodes.length<30){
    console.log(document.getElementById("AddChampCampement").childNodes.length)
    let Objet = document.createElement("INPUT");
    let Poids = document.createElement("INPUT");
    Objet.type = "text";
    Objet.className = "objetInput";
    Objet.placeholder = "OBJET";
    Objet.onkeyup = function() {
      this.value = this.value.toUpperCase();
    }
    Objet.maxLength = 18;

    document.getElementById("AddChampCampement").appendChild(Objet);

    Poids.type = "number";
    Poids.className = "poidsInput";
    Poids.placeholder = "POIDS";
    Poids.id = "poidsCampement_" + document.getElementById("AddChampCampement").childNodes.length;
    Poids.onkeypress = function() {
      return !(event.charCode == 46 || event.charCode == 44 || event.charCode == 188 || event.charCode == 190);
    }
    Poids.onkeyup = function() {
      limit(this);
    }
    document.getElementById("AddChampCampement").appendChild(Poids);
  }
}

Answer 3

非常适合这种限制，所以我采取了你的两个答案，它可以保持唯一ID的限制。

这是代码：

const NewInput = (function() {
    let i = 0;

    return function NewInput() {
        i++;
        if(document.getElementById("AddChampCampement").childNodes.length<30){
        let Objet = document.createElement("INPUT");
        let Poids = document.createElement("INPUT");

        Objet.type = "text";
        Objet.className = "objetInput";
        Objet.placeholder = "OBJET";
        Objet.onkeyup = function() {
            this.value = this.value.toUpperCase();
        }
        Objet.maxLength = 18;

        document.getElementById("AddChampCampement").appendChild(Objet);

        Poids.type = "number";
        Poids.className = "poidsInput";
        Poids.placeholder = "POIDS";
        Poids.id = "poidsCampement_" + i;
        Poids.onkeypress = function() {
            return !(event.charCode == 46 || event.charCode == 44 || event.charCode == 188 || event.charCode == 190);
        }
        Poids.onkeyup = function() {
            limit(this);
        }

        document.getElementById("AddChampCampement").appendChild(Poids);

    }}

})()