Генерация идентификаторов входов динамически с использованием Javascript

Question

Я работаю над приложением, которое имеет несколько полей ввода в строке. На стороне есть значок добавления, при котором при нажатии пользователем динамически добавляется дополнительная строка, содержащая поля ввода .Я хочу генерировать идентификаторы исходящих полей ввода динамически, когда пользователь нажимает на значок кнопки добавления.

Пожалуйста, помогите?

Код разметки

    <div>
        <input type="text" name="1" size="4" id="inp1" value="">
        <input type="text" name="2" size="4" id="inp2"  value="">
        <input type="text" name="3" size="4" id="inp3"  value="">
        <input type="text" name="4" size="4" id="inp4"  value="">
        <input type="text" name="5" size="4" id="inp5"  value="">  +   
    </div>
//Icon to add another row of input fields dynamically
<i class="fas fa-plus"></i>

Answer 1

Просто сделано:

var inputContainer = document.getElementById("inputContainer"),
  cnt = 1;

function generateInput() {
  cnt++;
  inputContainer.innerHTML += '<input type="text" name="' + cnt + '" size="4" id="inp' + cnt + '" value="">';
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">


<div id="inputContainer">
  <input type="text" name="1" size="4" id="inp1" value="">
</div>

<i class="fas fa-plus" onclick="generateInput()"></i>

В моем примере я просто увеличиваю cnt var каждый раз, когда вызывается функция generateInput(), а затем добавляю ввод к inputContainer с его новым уникальным name AND id

Надеюсь, это поможет!

Answer 2

Как насчет этого?(Я поместил кнопку «Добавить» вне DIV, содержащего входы, но он может войти внутрь, если вы предпочитаете.)

<div class="inputSet">
    <input type="text" name="1" size="4" id="inp1" value="">
    <input type="text" name="2" size="4" id="inp2"  value="">
    <input type="text" name="3" size="4" id="inp3"  value="">
    <input type="text" name="4" size="4" id="inp4"  value="">
    <input type="text" name="5" size="4" id="inp5"  value="">
</div>
<button onclick="addInputSet(this);">ADD</button>
<i class="fas fa-plus"></i>

Javascript:

var rowCount = 5;
function addInputSet(btn) {
    var row = document.querySelector('div.inputSet').cloneNode(true);
    var inputs = row.getElementsByTagName('input');
    for(var i of inputs) {
        i.name = (++rowCount).toString();
        i.id = 'inp' + rowCount;
    }
    btn.parentNode.insertBefore(row,btn);
}

Answer 3

Все, что вам нужно, это знать следующий индекс / номер элемента, который вы хотите добавить, чтобы убедиться, что он уникален и соответствует нумерации, которую вы уже установили для уже существующих элементов.

Поскольку вы хотите добавить входные данные группами по 5 (и сгруппированы в новый <div>), я бы предложил добавить внешний элемент обертки, чтобы мы могли добавить новый <div> (а внутренний 5 новый *). 1005 * элементов) правильно.

При каждом нажатии кнопки вам нужно будет создать новый контейнер <div>, а затем использовать простой цикл for, чтобы итеративно добавлять 5 новых <input> элементов. В каждой итерации вы увеличиваете уникальный идентификатор:

// Starting number of inputs
let count = 5;

// Wrapper
const wrapper = document.querySelector('#wrapper');

document.querySelector('#btn').addEventListener('click', () => {

  const container = document.createElement('div');
  
  for (let i = 0; i < 5; i++) {
    // Increment the count to ensure that it is unique
    count++;

    // Create your new `<input>` element
    const input = document.createElement('input');
    input.type = 'text';
    input.name = count;
    input.size = '4';
    input.id = `inp${count}`;

    container.appendChild(input);
    
    // Optional: add empty whitespace after each child
    container.append(document.createTextNode(' '));
  }
  
  wrapper.appendChild(container);
});

<div id="wrapper">
<div>
  <input type="text" name="1" size="4" id="inp1" value="">
  <input type="text" name="2" size="4" id="inp2" value="">
  <input type="text" name="3" size="4" id="inp3" value="">
  <input type="text" name="4" size="4" id="inp4" value="">
  <input type="text" name="5" size="4" id="inp5" value="">
</div>
</div>
<button type="button" id="btn">Add new input group</button>

Answer 4

for (let i = 0; i < 10; i++) {
 	let input = document.createElement('input');
	input.id = 'input' + i;
  document.querySelector('div').appendChild(input);
}

<div></div>