Question

我正在尝试创建一个排在前10名的排行榜，到目前为止，我只实施了3名玩家，但是遇到了一个问题。我的脚本似乎在网页上没有输出任何内容。

该脚本的目的是仅根据得分来比较3个数组，player1，player2和player3。这是每个数组的第二个索引。我希望脚本按得分最高的顺序列出玩家。

这种方法似乎并不是很有效，尤其是当我不得不再增加7个播放器时。有人可以建议也许更简单的方法，并向我展示为什么我的脚本不会输出信息。

这是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);
    {
    }
}
}

这是我的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>

Answer 1

您的代码还无法解决您的问题，因为存在很多问题。我建议您阅读Javascript对象，数组和将HTML注入页面的基础知识。

首先，您的播放器对象不是同一结构。 player3在属性Name和Score中具有大写字母。 Javascript区分大小写，因此您无法正确比较这些属性。

其次，您尝试使用带有数字的正方形表示法访问播放器对象的属性，例如player1[1]。如果像这样传递属性名称，则可以使用正方形表示法：player1['name']或使用点表示法：player1.name

要解决您的问题，您需要将所有播放器排列在一个数组中，对该数组进行排序，然后在页面上显示。要注入HTML，您必须在DOM中具有一个占位符，例如下面的示例中的表格。然后，您可以遍历排序的播放器，建立表HTML结构（在变量tbodyHtml中），然后注入.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>

Answer 2

使用objects！每个玩家都有自己的对象，并具有相关的属性，例如“名称”，“日期”和“得分”。

这就是它的工作方式。注意：我从@itodd偷走了html和css

我知道您的问题仍然存在，但是请不要复制和粘贴。在这里，您不了解的任何内容，请进行研究，直到您完全了解为止。最后，您应该了解

对象
功能
每个功能
箭头功能
DOM
+ =运算符
参数

我专门列出了上述主题，因此您将获得最大的收益，而不仅仅是c＆p。请花些时间学习它们。

 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>

祝你好运：）！

Answer 3

好像您的javascript中缺少一些（）。

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

需要成为

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

另外，请注意您的对象参数，它们区分大小写（即名称与名称），这会引起问题。

我也建议将分数作为数字而不是字符串传递，尽管您应该使用Number（）来适应这种情况，以防万一。

有一种更简单的排序方法。尝试这样的事情：

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

在HTML / JS中创建页首横幅

3 个答案: