Javascript 在HTML/JS中创建排行榜
我正在尝试创建一个前10名排行榜，目前为止，我只实现了3名玩家，但我遇到了一个问题。我的脚本似乎没有在网页上输出任何内容 该脚本的目的是仅基于分数比较3个数组：player1、player2和player3。这是每个数组的第二个索引。我希望脚本按照最高分数的顺序列出玩家 这种方法似乎不是很有效，尤其是当我不得不再增加7名球员时。有人可以建议一个更简单的方法，并告诉我为什么我的脚本不会输出信息 这是JSJavascript 在HTML/JS中创建排行榜,javascript,html,css,Javascript,Html,Css,我正在尝试创建一个前10名排行榜，目前为止，我只实现了3名玩家，但我遇到了一个问题。我的脚本似乎没有在网页上输出任何内容 该脚本的目的是仅基于分数比较3个数组：player1、player2和player3。这是每个数组的第二个索引。我希望脚本按照最高分数的顺序列出玩家 这种方法似乎不是很有效，尤其是当我不得不再增加7名球员时。有人可以建议一个更简单的方法，并告诉我为什么我的脚本不会输出信息 这是JS function leaderboard() { var player1 = {name:"T
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>
<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中缺少了一些（）
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>
排行榜（）；
功能排行榜（）{
const container=document.getElementById（“容器”）；
var玩家=[
{姓名：“托马斯”，日期：“2018年1月23日”，分数：201}，
{姓名：“迈克尔”，日期：“2017年3月24日”，分数：943}，
{姓名：“丽莎”，日期：“06/04/18”，分数：79}
]
const playersSorted=players.sort（函数（a，b）{
if（Number（a.score）数字（b.分数））返回1；
返回0；
});
//在列表项中输出玩家
for（playersSorted中的p）{
player=playersSorted[p]；
var node=document.createElement（“li”）；//创建一个节点
var textnode=document.createTextNode（`Name:${player.Name}日期：${player.Date}分数：${player.Score}`）；//创建一个文本节点
node.appendChild（textnode）；//将文本追加到
container.appendChild（节点）；
}
}
看起来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>
排行榜（）；
功能排行榜（）{
const container=document.getElementById（“容器”）；
var玩家=[
{姓名：“托马斯”，日期：“2018年1月23日”，分数：201}，
{姓名：“迈克尔”，日期：“2017年3月24日”，分数：943}，
{姓名：“丽莎”，日期：“06/04/18”，分数：79}
]
const playersSorted=players.sort（函数（a，b）{
if（Number（a.score）数字（b.分数））返回1；
返回0；
});
//在列表项中输出玩家
for（playersSorted中的p）{
player=playersSorted[p]；
var node=document.createElement（“li”）；//创建一个节点
var textnode=document.createTextNode（`Name:${player.Name}日期：${player.Date}分数：${player.Score}`）；//创建一个文本节点
node.appendChild（textnode）；//将文本追加到
container.appendChild（节点）；
}
}
您的代码无法解决您的问题，因为问题很多。我建议您阅读Javascript对象、数组和将HTML注入页面的基础知识
首先，您的播放器对象不是相同的结构player3
在属性Name
和Score
中使用大写字母。Javascript区分大小写，因此无法正确比较这些属性
其次，您正试图使用带有数字的平方表示法访问播放器对象的属性，例如player1[1]
。如果像这样传入属性名称，则可以使用正方形表示法：player1['name']
或使用点表示法：player1.name
要解决您的问题，您需要将所有玩家放在一个数组中，对该数组进行排序，然后显示在页面上。要插入HTML，您必须在DOM中有一个占位符，如下面示例中的表。
然后，您可以在已排序的播放器上循环，构建表格HTML结构（在变量tbodyHtml
中），然后注入。innerHTML
功能排行榜（）{
var排行榜=document.getElementById（“排行榜”）；
var tbody=排行榜查询选择器（“tbody”）；
var tbodyHtml=''；
var player1={姓名：“托马斯”，日期：“01/23/18”，分数：“201”}；
var player2={姓名：“Michael”，日期：“03/24/17”，分数：“943”}；
var player3={姓名：“Lisa”，日期：“06/04/18”，分数：“79”}；
var玩家=[
玩家1，
玩家2，
玩家3
];
玩家。排序（函数（a，b）{
返回编号（b.score）-编号（a.score）；
});
for（玩家中的玩家）{
tbodyHtml+=''+player.name+''+player.score+''；
}
tbody.innerHTML=tbodyHtml；
}
排行榜（）
表格{
边界塌陷：塌陷；
}
th，
运输署{
边框：1px实心#aaa；
填充物：5px；
文本对齐：左对齐；
}
玩家
分数
您的代码无法解决您的问题，因为问题很多。我建议你