I am doing a project where I have to put some hockey players in order by statistics. I finished that part pretty easily, but then I noticed that the divs containing the names of the players and their stats weren't displaying the same way. Here's a picture:
As you can see, the first two print out differently than the rest. I believe it is because the first two were made manually in HTML and the rest were made in a "for" loop and appended to the list. Unfortunately, I can't find any difference between the two sets of divs; they have the same class, the same elements inside and the same location, as far as I can tell.
Here is some of my code :
let listeDiv = document.getElementById("liste");
let elementStats = document.getElementById("stats-hockey");
let textStats = elementStats.innerHTML;
// sépare le texte au caractère "new line"
let ligneStats = textStats.split("\n"); // Est-ce que c'est correct si j'ai changé l'ordre un peu ?
class Joueur {
nom = "";
equipe = "";
buts = 0;
tirsAuBut = 0;
constructor(_nom, _equipe, _buts, _tirsAuBut) {
this.nom = _nom;
this.equipe = _equipe;
this.buts = _buts;
this.tirsAuBut = _tirsAuBut;
}
}
let tableauComplet = new Array();
for (let ligneIndex = 0; ligneIndex < ligneStats.length; ligneIndex++) {
let tableauStatsIndividuelles = ligneStats[ligneIndex];
tableauStatsIndividuelles = tableauStatsIndividuelles.trim();
if (tableauStatsIndividuelles != "") {
tableauStatsIndividuelles = tableauStatsIndividuelles.split(";");
let nom = tableauStatsIndividuelles[0];
let equipe = tableauStatsIndividuelles[1];
let buts = tableauStatsIndividuelles[4];
let tirsAuBut = tableauStatsIndividuelles[10];
let joueur = new Joueur(nom, equipe, buts, tirsAuBut);
tableauComplet.push(joueur);
}
}
function afficherJoueurs() // Animation pour les pays
{
//liste.innerText = "";
for (let rangeeIndex = 0; rangeeIndex < 3; rangeeIndex++) {
let joueur = tableauComplet[rangeeIndex];
let joueurDiv = document.createElement("div");
let nomDiv = document.createElement("div");
let equipeDiv = document.createElement("div");
let butsDiv = document.createElement("div");
let tirsAuButDiv = document.createElement("div");
joueurDiv.className = "joueur";
nomDiv.className = "nom";
equipeDiv.className = "equipe";
butsDiv.className = "buts";
tirsAuButDiv.className = "tirs-au-but";
nomDiv.innerText = tableauComplet[rangeeIndex].nom;
equipeDiv.innerText = tableauComplet[rangeeIndex].equipe;
butsDiv.innerText = "buts : " + tableauComplet[rangeeIndex].buts;
tirsAuButDiv.innerText = "tirs : " + tableauComplet[rangeeIndex].tirsAuBut;
joueurDiv.append(nomDiv, equipeDiv, butsDiv, tirsAuButDiv);
liste.append(joueurDiv);
}
}
afficherJoueurs();* {
box-sizing: border-box;
}
#stats-hockey {
visibility: hidden;
height: 0px;
}
.joueur {
position: relative;
width: 700px;
border-bottom: 1px solid white;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.nom {
display: inline-block;
background-color: lightblue;
font-weight: bold;
width: 280px;
}
.equipe {
display: inline-block;
background-color: rgb(153, 194, 192);
width: 65px;
text-align: center;
}
.buts {
display: inline-block;
background-color: lightblue;
padding-left: 10px;
width: 165px;
}
.tirs-au-but {
display: inline-block;
background-color: rgb(153, 194, 192);
padding-left: 10px;
width: 175px;
}<pre id="stats-hockey">
Connor McDavid;EDM;24;80;44;79;123;45;28;22:03;314
Johnny Gaudreau;CGY;28;82;40;75;115;26;64;18:34;262
Jonathan Huberdeau;FLA;28;80;30;85;115;54;35;19:25;222
Leon Draisaitl;EDM;26;80;55;55;110;40;17;22:20;278
</pre>
<!--J.T. Miller n'est pas en ordre à cause du point-->
<div id="liste">
<div class="joueur">
<div class="nom">Bill Barilko</div>
<div class="equipe">TOR</div>
<div class="buts">buts: 8</div>
<div class="tirs-au-but">tirs: 35</div>
</div>
<div class="joueur">
<div class="nom">Alexander Mogilny</div>
<div class="equipe">BUF</div>
<div class="buts">buts: 76</div>
<div class="tirs-au-but">tirs: 323</div>
</div>
</div>P.S. Sorry most of the code is in French. It's a school project, so I don't have much choice.
