JavaScript создать элемент в цикле, один за другим - PullRequest
Новая
       19

JavaScript создать элемент в цикле, один за другим

0 голосов
/ 18 марта 2019

Я не могу найти ответ на свою проблему, будучи новичком в 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);

    }
}

Ответы [ 3 ]

0 голосов
/ 18 марта 2019

Это должно заставить функцию запускаться максимум в 15 раз, но вы добавляете два поля ввода за раз в коде, поэтому я устанавливаю для элементов max значение 30. Идентификаторы будут начинаться с 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);
  }
}
0 голосов
/ 18 марта 2019

отлично подходит для ограничения, поэтому я взял два ваших ответа, и он работает, чтобы сохранить уникальный идентификатор с ограничением.

вот код: 

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

    }}

})()
0 голосов
/ 18 марта 2019

Эта версия хранит текущее значение i в закрытии. Вы также можете сделать это с помощью глобальной переменной (не рекомендуется), в localStorage браузера (маловероятно, но возможно), или в скрытом месте в DOM, и, вероятно, в других местах.

Обратите внимание на выражение немедленного вызова функции (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>
...