CODEWITHSUNDEEP
javascriptjqueryhtmlunique-id
Macksen
Macksen

Reputation: 81

Is there a way to assign unique IDs to createElement objects?

I have a button when pressed creates new input bars and I would like those input bars to have unique ids, for example - textBar1, textBar2, textBar3 and so on.

I tried creating a variable outside of the function that has the value 0 and then inside the function add the value with +1 for each time the function runs but that doesn't work but instead it assigns the id textBar0 to every element that is created.

Does anyone have any suggestions on how to solve this?

Thanks in advance!

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

Upvotes: 3

Views: 5835

Answers (4)

Tanmay
Tanmay

Reputation: 746

Best way is to use _.uniqueId.

Generate a globally-unique id for client-side models or DOM elements that need one. If prefix is passed, the id will be appended to it.

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

Upvotes: 3

nettux
nettux

Reputation: 5406

You can use Math.random like this:

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

It is my understanding that when you first call Math.random it generates a sequence of unique random numbers between 0 and 1 using the current time in milliseconds as a seed then returns the first one. Subsequent calls will move through the generated sequence of numbers, returning them one at a time, giving you the ability to generate random unique strings for element IDs.

Upvotes: 2

Ashish
Ashish

Reputation: 743

jQuery Code -

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

Working JSFiddle - http://jsfiddle.net/Ashish_developer/mtafre04/

Upvotes: 0

Amit Joki
Amit Joki

Reputation: 59232

That is becaus you're not reassinging the changed value to counter. Use counter+=1 instead or just counter++

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

What you were doing before was always add 1 to 0

Upvotes: 5

Related Questions