JavaScript - Iterate über dynamisch HTML erstellen

Question

Ich versuche, eine Konstruktorfunktion mit einer Methode zu schreiben, die eine Reihe von Zeilen (numerisches Argument) durchläuft, und für jede der einzelnen Zeilen dann eine Schleife über mehrere Punkte (numerisches Argument)). In jeder der beiden Schleifen wird ein Teil von html gerendert. Ich kann den ersten Teil html zum Rendern bekommen, aber wenn ich versuche, den zweiten Teil mit einem Selektor vom zuvor gerenderten HTML zu durchlaufen, passiert nichts. Was vermisse ich ?

HTML CODE

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

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 (Javascript nur)

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 Hank you @rainerh für die Antwort auf meine Frage. Wie auch immer, nachdem ich überlegt habe, was @shilly im Kommentar bezüglich der Verwendung von .innerHTML innerhalb von for-Schleifen gesagt hat, habe ich einige Änderungen an meinem Code vorgenommen, um seinen Vorschlag zu reflektieren. Hoffentlich wird dies für andere nützlich sein, die versuchen, etwas Ähnliches zu tun.

Answer 1

Zuerst ist die CSS-Klasse ein Farbpunkt und keine Farbpunkte, wie Sie es in Ihrem Selektor haben.

Zweitens gibt getElementsByCLassName ein Array zurück. Also muss hier ein Index verwendet werden.

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