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 的当前值存储在闭包中。您也可以使用全局变量（不推荐）、浏览器的本地存储（不太可能，但可能）或 DOM 中的隐藏点以及可能在其他地方执行此操作。

注意存储 i 的 Immediately Invoked Function Expression (IIFE) 和 returns 在范围内具有 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。id 将从 1 开始并递增 2每一次。我在 "AddChampCampement" 中使用 children 的数量，因为它更新时没有设置任何全局值:)

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);

    }}

})()

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

javascript create element in loop, one by one

javascript

loops

createelement