JavaScript를 동적으로 반복 작성합니다.

Question

여러 행 (숫자 인수)을 반복하는 메소드로 생성자 함수를 작성하려고 시도하고 있으며 각 개별 행에 대해 여러 개의 점 (숫자 인수). 각각의 두 루프에서 html의 일부가 렌더링됩니다. 렌더링 할 첫 번째 부분은 html 얻을 수 있지만 이전에 렌더링 된 HTML에서 선택기를 사용하여 두 번째 부분 위로 루프를 시도 할 때 아무 일도 일어나지 않습니다. 나는 무엇을 놓치고 있습니까?

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 --> 

자바 스크립트 코드

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; 
     }    
    }  
}; 

솔루션 (자바 스크립트 만)

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 클래스는 색상 도트이며 색상 도트가 아닙니다. 선택 도구에있는 것처럼.

두 번째로 getElementsByCLassName은 배열을 반환합니다. 여기에 색인을 사용해야합니다.