admin管理员组

文章数量:1431434

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

The purpose of the script is to pare 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>

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

The purpose of the script is to pare 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>
  • javascript
  • html
  • css
Share Improve this question asked Sep 25, 2018 at 23:25 Tcann99Tcann99 232 silver badges8 bronze badges 1
  • Please check your console for errors. That will give a start in determining why noting is displaying. You can also check out this question: stackoverflow./questions/1129216/… – Jon P Commented Sep 26, 2018 at 1:27
Add a ment  | 

3 Answers 3

Reset to default 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 :)!

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

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 remend passing the score as a number rather than a string, although you should use Number() to acmodate 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>

本文标签： javascriptCreating a leaderboard in HTMLJSStack Overflow

版权声明：本文标题：javascript - Creating a leaderboard in HTMLJS - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745556374a2663211.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。