JavaScriptを動的に繰り返します。

Question

私はいくつかの行（数値引数）をループするメソッドを使ってコンストラクタ関数を記述しようとしていますが、個々の行のそれぞれについて、 ）。それぞれの2つのループで、htmlの一部がレンダリングされます。レンダリングする最初の部分htmlを取得できますが、前にレンダリングされたhtmlのセレクタを使用して2番目の部分をループするときに何も起こりません。私は何が欠けていますか？

HTMLコード

<div class="container"> 
    <h1 class="heading">Random Colors</h1> 
    <div class="row"> 
     <div id="frame" class="col-xs-12"> 
      <!-- CONTENT PUSHED BY JAVASCRIPT -->  
     </div> 
    </div><!-- Ends .row --> 
</div><!-- Ends .container --> 

JavaScriptコード

var ColorDots = function(rows, dots) { 
    this.numOfRows = rows; 
    this.numOfDots = dots; 
    this.renderDots(); 

}; 

ColorDots.prototype.renderDots = function() { 

    this.rowTemplate = '<div class="color-dot row"></div>'; 
    this.iconTemplate = '<i class="fa fa-circle icon" aria-hidden="true"></i>';  

    for (var r = 0; r < this.numOfRows; r++) { 

     document.getElementById('frame').innerHTML += this.rowTemplate; 

     for (var i = 0; i < this.numOfDots; i++) { 

      document.getElementsByClassName('color-dot').innerHTML += this.iconTemplate; 
     }    
    }  
}; 

SOLUTION（ジャバスクリプトのみ）

var ColorDots = function(rows, dots) { 

     // Properties 
     this.numOfDots = dots; 
     this.numOfRows = rows || 1; 
     this.iconHtml = '<i class="fa fa-circle icon" aria-hidden="true"></i>'; 

     this.renderRows(); 

    };  

    ColorDots.prototype.renderRows = function() { 

     this.rowHtml = ''; 

     for (var r = 0; r < this.numOfRows; r++) { 

      this.rowHtml += '<div class="color-dot row">'; 

      for (var i = 0; i < this.numOfDots; i++) {    
       this.rowHtml += this.iconHtml; 
      } 

      this.rowHtml += '</div>'; 
     } 

     document.getElementById('frame').innerHTML = this.rowHtml; 

}; 

T私の質問への答えを与えるためにあなたを@rainerhに抱きしめてください。 forループ内で.innerHTMLを使用することに関して@shillyがコメントで述べたことを考慮した後、彼の提案を反映するためにコードにいくつかの変更を加えました。うまくいけば、これは私に類似した何かをしようとする他の人には役に立ちます。

Answer 1

まず、cssクラスはカラードットであり、セレクタ内にあるようにカラードットではありません。

第2にgetElementsByCLassNameは配列を返します。だからここでインデックスを使用しなければならない。

ColorDots.prototype.renderDots = function() { 
    this.rowTemplate = '<div class="color-dot row"></div>'; 
    this.iconTemplate = '<i class="fa fa-circle icon" aria-hidden="true"></i>';  

    for (var r = 0; r < this.numOfRows; r++) { 

    document.getElementById('frame').innerHTML += this.rowTemplate; 
    for (var i = 0; i < this.numOfDots; i++) { 
     document.getElementsByClassName('color-dots')[r].innerHTML += this.iconTemplate; 
    }    
    }  
};