入れ子DOM生成バグ

Question

Bulma Flexboxプラグインを使用して、REST APIからプルする各データセットのタイルを生成しようとしています。私は横に横に並べられたタイルを生成しています。各タイルは別のタイルの上に積み重ねています。 Bulmaのドキュメントは、階層がどのように動作するのかを詳しく説明していますが、クラス名はかなり自己記述的です。

DOM操作のすべてを正しく行うJavascriptでループを作成することができました。タイルは私が望むようにレイアウトされていますが、タイルの各行は同じ内容を表示します。私はこれを修正する方法のアイデアがありません。私はループ内で変数を宣言してはならないことを知っていましたが、これを最初に機能させたいと思います。

「dataDiv」である：ここで私が使用している機能があるサイトの <div id="data" class="tile is-ancestor is-vertical"></div>

function createTileLayout() { 

    for(var i = 0; i < earthquakesObject.features.length; i++) { 

     var dataDiv = document.getElementById("data"); 
     var parentDiv = document.createElement("DIV"); 
     parentDiv.className = "tile is-parent"; 

     for(var count = 0; count < 3; count++) { 
      //creating child div for flexbox 
      var childDiv = document.createElement("DIV"); 
      childDiv.className = "tile is-4 is-child box"; 

      //Creating elements 
      var titleHeader = document.createElement("H2"); 
      var magnitudeElement = document.createElement("P"); 
      var locationElement = document.createElement("P"); 
      var tsunamiElement = document.createElement("P"); 
      var urlElement = document.createElement("P"); 
      var anchorElement = document.createElement("A"); 
      anchorElement.href = 
      earthquakesObject.features[i].properties.url; 

      //create text nodes for each property 
      var title = document.createTextNode("Earthquake " + (i + 
       enter code here1)); 
      var magnitude = document.createTextNode("Magnitude: " + 
       earthquakesObject.features[i].properties.mag); 
      var location = document.createTextNode("Location: " + 
       earthquakesObject.features[i].properties.place); 
      var tsunami = document.createTextNode("There" + wasTsunami() 
       + "a tsunami warning with this earthquake."); 
      var link = document.createTextNode("Link to the USGS page on 
       the earthquake."); 

      //appending text nodes 
      titleHeader.appendChild(title);   
      magnitudeElement.appendChild(magnitude); 
      locationElement.appendChild(location); 
      tsunamiElement.appendChild(tsunami); 
      anchorElement.appendChild(link); 
      urlElement.appendChild(anchorElement); 

      //appending elements to child div 
      childDiv.appendChild(titleHeader); 
      childDiv.appendChild(magnitudeElement); 
      childDiv.appendChild(locationElement); 
      childDiv.appendChild(tsunamiElement); 
      childDiv.appendChild(urlElement); 
      parentDiv.appendChild(childDiv); 
     } 
     dataDiv.appendChild(parentDiv); 
    } 
} 

ライブバージョンは、ここで見つけることができます： https://odocoileus.github.io/earthquake-app/（凶悪なスタイリングについては申し訳ありません）。ありがとう！

Answer 1

問題を修正しました。これは私が使用したコードです。

function createTileLayout() { 
      for(var i = 0; i < earthquakesObject.features.length;) { 
      //Create 3 tiles in the parent element 
       var dataDiv = document.getElementById("data"); 
       var parentDiv = document.createElement("DIV"); 
       var titleHeader, magnitudeElement, locationElement, tsunamiElement, 
        urlElement, anchorElement, title, magnitude, location, tsunami, 
        link, childDiv; 

       parentDiv.className = "tile is-parent"; 

       for(var count = 0; count < 3; count++, i++) { 
        //creating child div for flexbox 
        childDiv = document.createElement("DIV"); 
        childDiv.className = "tile is-4 is-child box"; 

        //Creating elements 
        titleHeader = document.createElement("H2"); 
        magnitudeElement = document.createElement("P"); 
        locationElement = document.createElement("P"); 
        tsunamiElement = document.createElement("P"); 
        urlElement = document.createElement("P"); 
        anchorElement = document.createElement("A"); 
        anchorElement.href = earthquakesObject.features[i].properties.url; 

        //create text nodes for each property 
        title = document.createTextNode("Earthquake " + (i + 1)); 
        magnitude = document.createTextNode("Magnitude: " + earthquakesObject.features[i].properties.mag); 
        location = document.createTextNode("Location: " + earthquakesObject.features[i].properties.place); 
        tsunami = document.createTextNode("There" + wasTsunami() + "a tsunami warning with this earthquake."); 
        link = document.createTextNode("Link to the USGS page on the earthquake."); 

        //appending text nodes 
        titleHeader.appendChild(title);   
        magnitudeElement.appendChild(magnitude); 
        locationElement.appendChild(location); 
        tsunamiElement.appendChild(tsunami); 
        anchorElement.appendChild(link); 
        urlElement.appendChild(anchorElement); 

        //appending elements to child div 
        childDiv.appendChild(titleHeader); 
        childDiv.appendChild(magnitudeElement); 
        childDiv.appendChild(locationElement); 
        childDiv.appendChild(tsunamiElement); 
        childDiv.appendChild(urlElement); 
        parentDiv.appendChild(childDiv); 

       } 
     dataDiv.appendChild(parentDiv); 
    } 
}