jsのインクリメント "id"オブジェクトは？

Question

ご協力いただきありがとうございます。それはオブジェクトを持つ私の最初の小さなプロジェクトであり、それは難しいです。

私はObjectでボードを作成しますが、私が作成したdivEltsごとに "ID"を増やしたいと思います。 私を助けることができますか？

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>

おかげ

Answer 1

私は

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

変更もここだ

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

に沿って、間違いを持っ​​て最適化Dバージョン

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();

Answer 2

setAttribute方法です - あなたはイコールでそれに値を割り当てないでください。小さなあなたのコードを修正それを修正します：

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

MDNドキュメント：Element.setAttribute(name, value);

Answer 3

あなたがこれを行うには、HTMLで番号のODのdiv要素「contenu」を見つけるために、JavaScriptのメソッドの長さを使用することができます実行：

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