can somebody please help me? How to add auto increment number in div ID using javascript? I have four divs and I'd like to have them automatically numbered (box1, box2, box3, box4) in the ID by javascript.

Here's my code

<div id="box" class="something"> </div>
<div id="box" class="something"> </div>
<div id="box" class="something"> </div>
<div id="box" class="something"> </div>

<script>
  var list = document.getElementsByClassName("something");
  for (var i = 0; i <= list.length; i++) {
   list[i].innerHTML = i;
  }
</script>

can somebody please help me? How to add auto increment number in div ID using javascript? I have four divs and I'd like to have them automatically numbered (box1, box2, box3, box4) in the ID by javascript.

Here's my code

<div id="box" class="something"> </div>
<div id="box" class="something"> </div>
<div id="box" class="something"> </div>
<div id="box" class="something"> </div>

<script>
  var list = document.getElementsByClassName("something");
  for (var i = 0; i <= list.length; i++) {
   list[i].innerHTML = i;
  }
</script>

• javascript
• auto-increment

Share Follow asked Jul 19, 2014 at 21:23 Csülök PugCsülök Pug 111 gold badge11 silver badge11 bronze badge 3

• 4 To start, don't use duplicate IDs. – Matt Ball Commented Jul 19, 2014 at 21:25
• @Csülök Pug , please, take a look this – Sergey Boiko Commented Jul 19, 2014 at 21:26
• Possible duplicate of How to increment div id value? – Confusion Matrix Commented Oct 21, 2017 at 8:28

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 1

set id property

var list = document.getElementsByClassName("something");
for (var i = 0; i < list.length; i++) {
    list[i].id = "box" + (i + 1);
}

There is an error in your code: <= should be only < if you are starting from 0!

One possible solution is to use the node.setAttribute("attributeName", "attributeValue") method in order to set / change the attribute (in this case the id) of an element:

<div id="box" class="something">A</div>
<div id="box" class="something">B</div>
<div id="box" class="something">C</div>
<div id="box" class="something">D</div>

<script>
  var list = document.getElementsByClassName("something");
  for (var i = 0; i < list.length; i++) {
   list[i].setAttribute("id", "box" + i);
  }
</script>

The output is:

<div id="box0" class="something"></div>
<div id="box1" class="something"></div>
<div id="box2" class="something"></div>
<div id="box3" class="something"></div>

If it is alright to use JS libraries (for example jQuery), then the transformation could be written even more succinctly:

$(".something").each(function(index) {
    $(this).attr("id", this.id + index);
});

This code leads to the same output as above.

The mented jQuery code:

// find all elements with the class "something"
$(".something")
// call for each one of them 
    .each(
// the function with parameter = current index
    function(index) {
// take the current element
    $(this)
// and set the attribute id to the new value
    .attr("id", this.id + index);
});