How increment "id" Object with js?

Question

thanks by advance for your help. It's my first little project with object and it's hard.

I create a board with Object but I would like to increment "ID" for each divElts I have create. Can you help me ?

  function Plateau(width,height,id){
  this.width = width +'px';
  this.height = height+'px';
  this.id=0;
  
  this.creation = function(){
    for (var i = 0; i < 40; i++) {

            var divElts = document.createElement('div');
            divElts.classList.add('case');
            divElts.style.width = this.width;
            divElts.style.height = this.height;
            divElts.setAttribute = ('id', this.id++);
            document.getElementById('contenu').appendChild(divElts);
        }
  };
}
var board = new Plateau(40,40);
board.creation();

#contenu{
  width :440px;
  height:440px;
}
.case{
  border-radius:20px;
  border:solid black 1px;
  display:inline-block;
  width:200px;
  height:200px;
   background-color:yellow;
}

<div id="contenu"></div>

Thanks

It's not clear from your code what you have tried. If you have made some attempts you should share them and any error messages. — Alan, Dec 24 '17 at 18:17
I don't think ids are needed as the elements still can be accessed by index `document.getElementById('contenu').childNodes[index]` — Slai, Dec 24 '17 at 18:26
@slai Ok thanks, effectively it's right, but it's just I prefer work with ID. Thanks for your help — , Dec 24 '17 at 18:38
@Alan I just tried to increment my divElts with id by using the poo nothing more. I just made an error of inattention with setAttribute (). Nothing more. Thanks for your help. Mabe is not perfect I don't work with javascript since long time. — , Dec 24 '17 at 18:41
then I would recommend using valid ids https://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html. Using number for id works in some cases but not in others — Slai, Dec 24 '17 at 18:46
ok @slai thanks for your advice I will go read that. And to be sincere I had not thought of that. document.getElementById('contenu').childNodes[index]. I keep that in my mind — , Dec 24 '17 at 18:54

tetta · Accepted Answer · 2017-12-24T18:20:55.037

I have mistake in line

divElts.setAttribute = ('id', this.id++);

Change it with

divElts.setAttribute('id', this.id++);

Here's optimized version

function Plateau(width,height,id){
  this.width = width +'px';
  this.height = height+'px';
  this.container = document.getElementById(id);
  this.id=0;
  
  this.creation = function(){
    var fragment = document.createDocumentFragment();
    for (var i = 0; i < 40; i++) {
            var divElts = document.createElement('div');
            divElts.classList.add('case');
            divElts.style.width = this.width;
            divElts.style.height = this.height;
            divElts.setAttribute('id', this.id++);
            fragment.appendChild(divElts);
        }
     this.container.appendChild(fragment);
  };
}
var board = new Plateau(40, 40, 'contenu');
board.creation();

Andy · Answer 2 · 2017-12-24T18:18:19.710

0

setAttribute is a method - you don't assign values to it with equals. A small correction to your code will fix it:

divElts.setAttribute('id', this.id++);

MDN documentation: Element.setAttribute(name, value);

edited Dec 24 '17 at 18:18

answered Dec 24 '17 at 18:13

Andy

61,948
13
68
95

score -1 · Answer 3 · answered Dec 24 '17 at 18:14

-1

You can use javascript method length to find the number od div element "contenu" in html to do this run :

var incremented_id = document.querySelectorAll('.contenu').length + 1;
divElts.setAttribute('id', incremented_id);

answered Dec 24 '17 at 18:14

Inderjeet Singh

556
1
9
22

Thank's my Mistake it was in divElts.setAttribute() and no =. Thanks for your help – Dec 24 '17 at 18:20

How increment "id" Object with js?

3 Answers3