0

I'm trying to create a top 10 leaderboard, for now, I've only implemented 3 players, but I'm coming across an issue. My script doesn't seem to be outputting anything on webpage.

The purpose of the script is to compare 3 arrays, player1,player2,and player3 solely based off of score. Which is the 2nd index of each array. I want the script to list the players in order of highest score.

This method doesn't really seem to be efficient, especially when I'll have to add 7 more players. Could someone suggest perhaps an easier approach, as well as show me why my script wont output the info.

Here's the JS

function leaderboard() {
var player1 = {name:"Thomas",date:"01/23/18",score:"201"};
var player2 = {name:"Michael",date:"03/24/17",score:"943"};
var player3 = {Name:"Lisa",date:"06/04/18",Score:"79"};

if(player1[2]>player2[2])&&(player1[2]>player3[2]) {
    document.write(player1);
    if(player2[2]>player3[2]) {
        document.write(player2);
        document.write(player3);
    }
    else {
        document.write(player3);
        document.write(player2);
    }
}
else if(player2[2]>player1[2])&&(player2[2]>player3[2]) {
    document.write(player2);
    if(player1[2]>player3[2]) {
        document.write(player1);
        document.write(player3);
    }
    else {
        document.write(player3);
        document.write(player1);
    }

}
else if(player3[2]>player2[2])&&(player3[2]>player1[2]) {
    document.write(player3);
    if(player1[2]>player2[2]) {
        document.write(player1);
        document.write(player2);
    }
    else {
        document.write(player2);
        document.write(player1);
    {
    }
}
}

Here's my html

<html>
<body>
<div id="container">
<script src = "topten.js"</script>
 <script>
 leaderboard();
 </script>
<link rel="stylesheet" type="text/css" href="/css/topten.css">
</html>
</body>
Tcann99
  • 23
  • 1
  • 8
  • Please check your console for errors. That will give a start in determining why noting is displaying. You can also check out this question: https://stackoverflow.com/questions/1129216/sort-array-of-objects-by-string-property-value-in-javascript – Jon P Sep 26 '18 at 01:27

3 Answers3

2

Use objects! Each player its own object with associated properties such as "Name", "Date", and "Score".

So here's how it would work. Note: I stole html and css from @itodd

I know your prob going to anyway, but PLEASE don't copy and paste. Anything in here you dont understand, please research until you understand COMPLETELY. By the end you should know about

  • Objects
  • Functions
  • forEach functions
  • Arrow functions
  • the DOM
  • += operator
  • Arguments

I have specifically included the topics above so you will get the max out of this answer instead of just c&p. Please take the time to learn them.

 function Player(myName, myDate, myScore) {
        this.name = myName;
        this.date = myDate;
        this.score = myScore;
    }

    // Create new players
    player1 = new Player("Thomas", "01/23/18", 201);
    player2 = new Player("Michael", "03/24/17", 943);
    player3 = new Player("Lisa", "06/04/18", 79); //Lisa needs to up her game
    Players = [player1, player2, player3];

    function displayLeaderboard() {
        let theExport = ""; 
        Players.sort((aPlayer, bPlayer) => aPlayer.score - bPlayer.score);
        Players.forEach((player) => theExport += '<tr><td>' + player.name + '</td><td>' + player.score + '</td></tr>');
        document.getElementById("thingy").innerHTML = theExport; //Why have good ID's when you can have bad ones? | Who needs children when we can use innerHTML?
    }

    displayLeaderboard(); //If you are not lazy (I am so I didn't do it) you will change this so you can pass an array of players. So it would be        displayLeaderboard(Players).
    table {
        border-collapse: collapse;
    }

    th,
    td {
        border: 1px solid #aaa;
        padding: 5px;
        text-align: left;
    }
<table>
    <thead>
      <th>Player</th><th>Score</th>
    </thead>
    <tbody id="thingy"></tbody>
</table>

Good luck :)!

JBis
  • 827
  • 1
  • 10
  • 26
1

Your code isn't close to solving your problem as there are number of issues. I suggest you read the basics of Javascript objects, arrays and injecting HTML into the page.

First of all, your player objects are not the same structure. player3 has uppercase letters in the properties Name and Score. Javascript is case-sensitive and therefore you cannot compare these properties properly.

Secondly, you are trying to access properties of the player objects using the square notation with a number e.g. player1[1]. You can use the square notation if you pass in the property name like so: player1['name'] or use dot notation: player1.name

To solve your problem you need to have all the players in an array, sort that array, and then display on the page. To inject HTML you must have a placeholder in the DOM such as a table in the example below. You can then loop over the sorted players, build up the table HTML structure (in variable tbodyHtml) and then inject with .innerHTML

function leaderboard() {
  var leaderboard = document.getElementById('leaderboard');
  var tbody = leaderboard.querySelector('tbody');
  var tbodyHtml = '';

  var player1 = {name:"Thomas",date:"01/23/18",score:"201"};
  var player2 = {name:"Michael",date:"03/24/17",score:"943"};
  var player3 = {name:"Lisa",date:"06/04/18",score:"79"};

  var players = [
    player1,
    player2,
    player3
  ]; 
  
  players.sort(function(a,b) {
    return Number(b.score) - Number(a.score);
  });
  
  for (var player of players) {
    tbodyHtml += '<tr><td>' + player.name + '</td><td>' + player.score + '</td></tr>';
  }
  
  tbody.innerHTML = tbodyHtml;
}

leaderboard();
table {
  border-collapse: collapse;
}

th,
td {
  border: 1px solid #aaa;
  padding: 5px;
  text-align: left;
}
<table id="leaderboard">
  <thead>
    <th>Player</th>
    <th>Score</th>
  </thead>
  <tbody></tbody>
</table>
itodd
  • 2,278
  • 1
  • 14
  • 14
0

Looks like you have some missing () in your javascript. 

if(player1[2]>player2[2])&&(player1[2]>player3[2]) {

Needs to be 

if ( (player1[2]>player2[2]) && (player1[2]>player3[2]) ) {

Also, be careful with your object paramaters, they are case sensitive (i.e. name vs Name) this will cause problems.

I would also recommend passing the score as a number rather than a string, although you should use Number() to accommodate for that just in case.

There is an easier way to do the sorting. Try something like this: 

<body>

    <ul id="container"></ul>

    <script>

        leaderboard();

        function leaderboard() {

            const container = document.getElementById("container");

            var players = [
                { name: "Thomas", date: "01/23/18", score: 201 },
                { name: "Michael", date: "03/24/17", score: 943 },
                { name: "Lisa", date: "06/04/18", score: 79 }
            ]

            const playersSorted = players.sort(function (a, b) {
                if ( Number(a.score) < Number(b.score) ) return -1;
                if ( Number(a.score) > Number(b.score) ) return 1;
                return 0;
            });

            // Output the players in list items
            for (p in playersSorted) {
                player = playersSorted[p];

                var node = document.createElement("li");                 // Create a <li> node
                var textnode = document.createTextNode(`Name: ${player.name} Date: ${player.date} Score: ${player.score}`);         // Create a text node
                node.appendChild(textnode);                              // Append the text to <li>
                container.appendChild(node);
            }

        }

    </script>


</body>
Jesse James Burton
  • 306
  • 2
  • 11