Generate spans with ids using JavaScript

Question

I have the following code which creates new spans with some input fields:

function add_course() {
     var newspan = document.createElement('span');
     newspan.innerHTML = 'Degree: <input type="text" name = "degree[]"> Course: <input type="text" name = "course[]">';
     document.getElementById('degree_course').appendChild(newspan); 
}

function add_skill() {
     var newspan = document.createElement('span');
     newspan.innerHTML = 'Skill: <input type="text" name = "skill[]"> Level: <input type="number"min ="1" max = "5" name = "level[]">';
     document.getElementById('skills').appendChild(newspan); 
}

I would like those spans to have a different id each. For example, in the case of add_course, if 3 spans where generated, i'd like them to have an id like: course_1, course_2, course_3 (skill_1, skill_2, skill_3 in the skills case).

I know I'll have to put and id="course_VAR" in the innerHTML and create a var that i'll inscrease everytime. (There won't be a for cicle, because the function will trigger when I hit a specific button).

<input class="buttons" type="button" id="more_fields" onclick="add_course();" value="Add Course" />

My question is, how can I get the var in the id and make it increase without a for cycle?

Just use a global variable (or one that's accessible from both functions) and increment it each time one of the functions is called. — FixMaker, Apr 25 '15 at 20:40
already answered here: http://stackoverflow.com/questions/10126395/how-to-jquery-clone-and-change-id — Amit, Apr 25 '15 at 20:43

Marcus Henrique · Answer 1 · 2015-04-25T20:52:49.740

3

Put your var outside of function scope and increment it inside.

var idCounter = 0;

function add_course() {
  var newspan = document.createElement('span');
  newspan.id = 'course_' + idCounter++;
  newspan.innerHTML = 'Degree: <input type="text" name = "degree[]"> Course: <input type="text" name = "course[]">';
  document.getElementById('degree_course').appendChild(newspan)
}

edited Apr 25 '15 at 20:52

answered Apr 25 '15 at 20:43

Marcus Henrique

762
1
5
15

That will add id's to the inputs inside the span... Is there a way to make the span itself have the id? Thanks :) – BVCGAAV Apr 25 '15 at 20:48
@ipg24 added my answer, which does that exactly :) – Downgoat Apr 25 '15 at 20:51
@ipg24 Now span itself has an id. – Marcus Henrique Apr 25 '15 at 20:57

score 2 · Accepted Answer · answered Apr 25 '15 at 20:49

2

What you need to do it add a counter, then use setAttribute

var counter = 0;

function add_course() {
    var newspan = document.createElement('span');
    newspan.setAttribute('id', "course_"+counter);
    newspan.innerHTML = 'Degree: <input type="text" name = "degree[]"> Course: <input type="text" name = "course[]">';
    document.getElementById('degree_course').appendChild(newspan);
    counter += 1;
}

answered Apr 25 '15 at 20:49

Downgoat

13,771
5
46
69

@ipg24 If this helped you, you can click the checkmark next to my answer :) – Downgoat Apr 25 '15 at 21:09

S McCrohan · Answer 3 · 2015-04-25T21:11:14.870

There's nothing inherently wrong with using a global or outer-scope variable to track this, as suggested in some of the other answers. But as an alternative, if you like to keep things 'tidy', you can do this:

var getIdFactory = function(pref) {
    return {
        counter: 0,
        prefix: pref,
        next: function() {
          this.counter++;
          return this.prefix+'_'+this.counter;
        }
    }
}

var courseId = getIdFactory('course');
var skillId = getIdFactory('skill');

Then, any time you need a new div ID, call (for instance) courseId.next().

function add_course() {
    var newspan = document.createElement('span');
    newspan.innerHTML = 'Degree: <input type="text" name = "degree[]"> Course: <input type="text" name = "course[]">';
    newspan.setAttribute('id', courseId.next());
    document.getElementById('degree_course').appendChild(newspan);
}

In your example here, this might be overkill. But one of the advantages here is that your id generation logic can be as complicated as you need, because it's self-contained.

JSfiddle here.

Generate spans with ids using JavaScript

3 Answers3