Grid Element Not Aligning Data In Horizontal Format-CodePudding

Im currently trying to put grid items on the same horizontal line. As of right now, my code creates a new grid container (on one row) for every piece of parsed data. I believe this comes from my JS file, specifically the loadPlayers() function where I parsed the data. More specifically, im trying to achieve below:

Data 1 | Data 2 | Data 3

Data 4 | Data 5 | Data 6

Ive tried implementing a row and column attribute into the parsing logic, but it seems like its not working properly. Any help would be greatly appreciated

//Loads Player Data
function loadPlayers() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {      
        var players = JSON.parse(this.responseText);

        // get 'data' key inside response
        var playersData = players.data;

        // loop all the players
        for (var player of playersData) {
            document.getElementById("players").innerHTML  =  "<row> <column> <div class = grid-container> <div class=grid-item> <center>"   
            player["first_name"]   " "   player["last_name"]   
            "<br /> "   
            player["position"]   
            "<br /> "  
            player["team"]["full_name"]   
             "<br />"  
            player["height_feet"]   "'"   player["height_inches"]  
             "<br />"  
             player["weight_pounds"]   " lbs"  
            "</center> </div> </div> </column> </row>";
        }      
      }
    };

    xhttp.open("GET", "https://www.balldontlie.io/api/v1/players", true);
    xhttp.send();

  }


  //Loads Game Data
  function loadGames() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        
        var games = JSON.parse(this.responseText);

        // get 'data' key inside response
        var gamesData = games.data;

        // loop all the games
        for (var game of gamesData) {
          //print score data 
            document.getElementById("games").innerHTML  = "<br />"   game["home_team_score"]   " - "   game["visitor_team_score"];
        }
      }
    };
    xhttp.open("GET", "https://www.balldontlie.io/api/v1/games", true);
    xhttp.send();
  }

  //Loads Team Data
  function loadTeams() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        

        var teams = JSON.parse(this.responseText);

        // get 'data' key inside response
        var teamsData = teams.data;

        // loop all the teams
        for (var team of teamsData) {
            // print full name and abbreivation
            document.getElementById("teams").innerHTML  = " <center> <br /> <center> "   team["full_name"]   ", "   team["abbreviation"]   ", "   team["conference"] ;
        }
      }
    };
    xhttp.open("GET", "https://www.balldontlie.io/api/v1/teams", true);
    xhttp.send();
  }


  //Loads Stats Data
  function loadStats() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        var season_averages = JSON.parse(this.responseText);

        // get 'data' key inside response
        var seasonsData = season_averages.data;

        // loop all the teams
        for (var data of seasonsData) {
            // print full name and abbreivation
            document.getElementById("season_averages").innerHTML  = "<br />"   data["player_id"] ;
        }
      }
    };
    xhttp.open("GET", "https://www.balldontlie.io/api/v1/season_averages", true);
    xhttp.send();
  }

.topnav {
    background-color: grey;
    overflow: hidden;
  }
  
  /* Add a black background color to the top navigation bar */
.topnav {
    overflow: hidden;
    background-color: #e9e9e9;
  }
  
  /* Style the links inside the navigation bar */
  .topnav a {
    float: left;
    display: block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
  }
  
  /* Change the color of links on hover */
  .topnav a:hover {
    background-color: #ddd;
    color: black;
  }
  
  /* Style the "active" element to highlight the current page */
  .topnav a.active {
    background-color: #2196F3;
    color: white;
  }
  
  /* Style the search box inside the navigation bar */
  .topnav input[type=text] {
    float: right;
    padding: 6px;
    border: none;
    margin-top: 8px;
    margin-right: 16px;
    font-size: 17px;
  }

  .grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
    padding: 10px;

  }

  .grid-item {
    width: 200px;
    height: 150px;
    background-color: lightblue;
    border: 5px solid rgb(5, 8, 5);
    border-radius: 20px;
    padding: 50px;
    margin: 20px;
    font-size: 25px;

    
}

.column {
    float: left;
    width: 33.3%;
    margin-bottom: 16px;
    padding: 0 8px;
  
}

.header{
    padding: 50px;
    text-align: center;
    background-color: lightblue;
    color: rgb(12, 0, 0);
}

<!DOCTYPE html>
<html>

<body>
<script src="main.js"></script>
<link rel="stylesheet" href="playersStyle.css">



<body style="background-color:peachpuff;" >

<div >
 <a  href="about.html">About</a>
 <a href="teams.html">Teams</a>
 <a href="players.html">Players</a>
 <a href="games.html">Recent Games</a>
 <a href="stats.html">Season Averages</a>
<input type="text" placeholder="Search..">
</div>



<div class = "header">
<center> <h1>Players Database</h1> </center>
<b> Sorted Alphabetically, By Last Name </b>
</div>

<div id = "players">
<center><button onclick="loadPlayers()">View Players</button></center>   
</div>







</body>
</html>

CodePudding user response：

You need to change your HTML markup. Try this code

<!DOCTYPE html>
<html>

<body>
<script src="main.js"></script>
<link rel="stylesheet" href="playersStyle.css">



<body style="background-color:peachpuff;" >

<div >
 <a  href="about.html">About</a>
 <a href="teams.html">Teams</a>
 <a href="players.html">Players</a>
 <a href="games.html">Recent Games</a>
 <a href="stats.html">Season Averages</a>
<input type="text" placeholder="Search..">
</div>



<div class = "header">
<center> <h1>Players Database</h1> </center>
<b> Sorted Alphabetically, By Last Name </b>
</div>
<center><button onclick="loadPlayers()">View Players</button></center>   
<div id = "players" >
</div>

</body>
</html>

.grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
    padding: 10px;

  }

  .grid-item {
    width: 200px;
    height: 150px;
    background-color: lightblue;
    border: 5px solid rgb(5, 8, 5);
    border-radius: 20px;
    padding: 50px;
    margin: 20px;
    font-size: 25px;

    
}

.column {
    float: left;
    width: 33.3%;
    margin-bottom: 16px;
    padding: 0 8px;
  
}

.header{
    padding: 50px;
    text-align: center;
    background-color: lightblue;
    color: rgb(12, 0, 0);
}

CodePudding user response：

You shouldnt have the grid-container repeated. Instead, it should be outside your loop. Only the grid-item should be looped.

 var playersData = players.data;

        document.getElementById("players").innerHTML  ="<div class ='grid-container'></div>"
        // loop all the players
        for (var player of playersData) {
            document.querySelector("#players .grid-container").innerHTML  =  "<div class=grid-item> <center>"   
            player["first_name"]   " "   player["last_name"]   
            "<br /> "   
            player["position"]   
            "<br /> "  
            player["team"]["full_name"]   
             "<br />"  
            player["height_feet"]   "'"   player["height_inches"]  
             "<br />"  
             player["weight_pounds"]   " lbs"  
            "</center> </div> </div> </column> </row>";
        }