Есть ли способ назначить уникальные идентификаторы для объектов createElement?

Question

У меня есть кнопка при нажатии создает новые панели ввода, и я хотел бы, чтобы эти панели ввода имели уникальные идентификаторы, например - textBar1, textBar2, textBar3 и так далее.

Я попытался создать переменную вне функции, которая имеет значение 0, а затем внутри функции добавлять значение с +1 для каждого запуска функции, но это не работает, но вместо этого она присваивает идентификатор textBar0 каждому элементу, который создается,

У кого-нибудь есть предложения как решить эту проблему?

Заранее спасибо!

HTML

<label for='ingredient'></label>
<input id="textBar" class="textBar" type="name" name="ingredient">

<div id="textBarPosition"></div>
<div id="addRemoveContainer">

<input id="addBar" type="button" value="Add Ingredient">

JavaScript / JQuery

   var counter = 0;
function createSector() {
  var input = document.createElement('input'); 
  input.setAttribute("id", 'textBar' + counter +1);
  input.type = 'text';
  input.name = 'name[]';
  return input;
counter = 1;

}


var form = document.getElementById('textBarPosition');
document.getElementById('addBar').addEventListener('click', function(e) {
    // step 1: create element and set opacity to 0.
    var selector = $(createSector());
    selector.fadeIn();

   // step 2: append it to its parent.
    $(form).append(selector);

    $('#removeBar').click(function(){
        $("input:last-child").remove(".textBar");
    });
});

Answer 1

Это потому, что вы не передаете измененное значение counter, использование counter+=1 вместо или просто counter++

input.setAttribute("id", 'textBar' + counter++); // now it should work

То, что вы делали раньше, всегда добавляло 1 в 0

Answer 2

Лучший способ - использовать _.uniqueId.

Создайте глобально уникальный идентификатор для моделей на стороне клиента или элементов DOM, которым он нужен. Если префикс передан, идентификатор будет добавлен к нему.

_.uniqueId('contact_');
=> 'contact_104'

Answer 3

Ты можешь использовать Math.random как это:

input.setAttribute("id", 'textBar_' + Math.random().toString(36));

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

Answer 4

Код JQuery -

  var counter = 0;
function createSector() {
  var input = document.createElement('input'); 
  input.setAttribute("id", 'textBar' + counter);
  input.type = 'text';
  input.name = 'name[]';
  return input;


}

var form = document.getElementById('textBarPosition');
document.getElementById('addBar').addEventListener('click', function(e) {
    // step 1: create element and set opacity to 0.
    var selector = $(createSector());
    counter++;
    selector.fadeIn();

   // step 2: append it to its parent.
    $(form).append(selector);

    $('#removeBar').click(function(){
        $("input:last-child").remove(".textBar");
    });
});

Работающий JSFiddle - http://jsfiddle.net/Ashish_developer/mtafre04/