我想要我的表＆＃39;分数＆＃39;由“能力”组成。对象中保存的值。
我相信我的问题在于以下几点：
var player = document.getElementById("player" + i + 1);
playerscore.innerText = playerList[i].ability;
我可以通过不使用＆＃39; i＆＃39;的值来实现这一点。为了增加ID，我只需为每个ID写一行代码。我确定这不是最好的做事方式，因此希望使用已设置的循环来循环使用ID。
我的代码在哪里出错了？这样做的更好方法是什么？
提前致谢。
var playerList = [
{name: "player1", highScore: 1, ability: 8},
{name: "player2", highScore: 1, ability: 7},
{name: "player3", highScore: 1, ability: 6},
{name: "player4", highScore: 1, ability: 5},
{name: "player5", highScore: 1, ability: 4},
{name: "player6", highScore: 1, ability: 3},
{name: "player7", highScore: 1, ability: 2},
{name: "player8", highScore: 1, ability: 1}
];
for (var i = 0; i < playerList.length; i++) {
console.log(i);
var player = document.getElementById("player" + i + 1);
var playerscore = document.getElementById('player' + i + 1 + "score")
var progress=Math.random();
progress=11*progress;
progress=Math.floor(progress);
playerList[i].ability=playerList[i].ability+progress;
console.log(playerList[i])
//add players score to the table//
playerscore.innerText = playerList[i].ability;
}<table>
<tr>
<th>Player</th>
<th>Score</th>
</tr>
<tr>
<td id="player1">1</td>
<td id="player1score">0</td>
</tr>
<tr>
<td id="player2">2</td>
<td id="player2score">0</td>
</tr>
<tr>
<td id="player3">3</td>
<td id="player3score">0</td>
</tr>
<tr>
<td id="player4">4</td>
<td id="player4score">0</td>
</tr>
<tr>
<td id="player5">5</td>
<td id="player5score">0</td>
</tr>
<tr>
<td id="player6">6</td>
<td id="player6score">0</td>
</tr>
<tr>
<td id="player7">7</td>
<td id="player7score">0</td>
</tr>
<tr>
<td id="player8">8</td>
<td id="player8score">0</td>
</tr>
</table>
答案 0 :(得分：1)
将i + 1包裹在您的getElementById中 - 请参阅以下演示：
var playerList = [
{name: "player1", highScore: 1, ability: 8},
{name: "player2", highScore: 1, ability: 7},
{name: "player3", highScore: 1, ability: 6},
{name: "player4", highScore: 1, ability: 5},
{name: "player5", highScore: 1, ability: 4},
{name: "player6", highScore: 1, ability: 3},
{name: "player7", highScore: 1, ability: 2},
{name: "player8", highScore: 1, ability: 1}
];
for (var i = 0; i < playerList.length; i++) {
var player = document.getElementById("player" + (i + 1));
var playerscore = document.getElementById('player' + (i + 1) + "score")
var progress=Math.random();
progress=11*progress;
progress=Math.floor(progress);
playerList[i].ability=playerList[i].ability+progress;
//add players score to the table//
playerscore.innerText = playerList[i].ability;
}<table>
<tr>
<th>Player</th>
<th>Score</th>
</tr>
<tr>
<td id="player1">1</td>
<td id="player1score">0</td>
</tr>
<tr>
<td id="player2">2</td>
<td id="player2score">0</td>
</tr>
<tr>
<td id="player3">3</td>
<td id="player3score">0</td>
</tr>
<tr>
<td id="player4">4</td>
<td id="player4score">0</td>
</tr>
<tr>
<td id="player5">5</td>
<td id="player5score">0</td>
</tr>
<tr>
<td id="player6">6</td>
<td id="player6score">0</td>
</tr>
<tr>
<td id="player7">7</td>
<td id="player7score">0</td>
</tr>
<tr>
<td id="player8">8</td>
<td id="player8score">0</td>
</tr>
</table>
答案 1 :(得分：1)
var playerList = [
{name: "player1", highScore: 1, ability: 8},
{name: "player2", highScore: 1, ability: 7},
{name: "player3", highScore: 1, ability: 6},
{name: "player4", highScore: 1, ability: 5},
{name: "player5", highScore: 1, ability: 4},
{name: "player6", highScore: 1, ability: 3},
{name: "player7", highScore: 1, ability: 2},
{name: "player8", highScore: 1, ability: 1}
];
for (var i = 0; i < playerList.length; i++) {
console.log(i);
var player = document.getElementById("player" + (i + 1));
var playerscore = document.getElementById('player' + (i + 1) + "score")
var progress=Math.random();
progress=11*progress;
progress=Math.floor(progress);
playerList[i].ability=playerList[i].ability+progress;
console.log(playerList[i])
//add players score to the table//
playerscore.innerText = playerList[i].ability;
}<table>
<tr>
<th>Player</th>
<th>Score</th>
</tr>
<tr>
<td id="player1">1</td>
<td id="player1score">0</td>
</tr>
<tr>
<td id="player2">2</td>
<td id="player2score">0</td>
</tr>
<tr>
<td id="player3">3</td>
<td id="player3score">0</td>
</tr>
<tr>
<td id="player4">4</td>
<td id="player4score">0</td>
</tr>
<tr>
<td id="player5">5</td>
<td id="player5score">0</td>
</tr>
<tr>
<td id="player6">6</td>
<td id="player6score">0</td>
</tr>
<tr>
<td id="player7">7</td>
<td id="player7score">0</td>
</tr>
<tr>
<td id="player8">8</td>
<td id="player8score">0</td>
</tr>
</table>
你在连接方面有问题，比方说i = 0，所以这个"player" + i + 1 = player01所以让player1像这样使用"player" + (i + 1)。这将先评估括号，然后用字符串连接。
答案 2 :(得分：1)
你最初的问题是你没有正确地取消引用你的计数变量，所以数学用于计算字符串连接中使用的错误索引。
要解决此问题，您需要将“i + 1”表达式放入getElementById调用中的一组常规括号中。
基本上是您最初的电话：
var player = document.getElementById("player" + i + 1);
需要成为：
var player = document.getElementById("player" + (i + 1));
在前一版本中，效果是最终的1变成一个字符串，因此成为字符串的一部分，而不是按预期添加到索引。
更好的做法是尝试使用vanilla JS，首先要跳过所有这些+1的东西，并使代码可以重复使用。
如果您根据W3C建议格式化表格，那么您最终会得到以下内容：
<table id="myTable">
<thead>
<tr>
<th>Player</th>
<th>Score</th>
</tr>
</thead>
<tbody id="myTableBody">
<tr>
<td>Player 1</td>
<td>1</td>
</tr>
<tr>
<td>Player 2</td>
<td>2</td>
</tr>
<!-- More TR's here as needed -->
</tbody>
</table>
使用 thead 和 tbody 意味着你可以分别操作表的标题和正文部分，然后允许你使用底层的JS api和表属性，而不是必须执行构建字符串的危险步骤，并可能使字符串格式不正确。
我不是说构建字符串是错误的方法，但是它很容易出错，而且你已经看到所需要的只是一个很小的计算错误，而你最终得到的ID名称并不是'匹配任何东西。
在JavaScript中的程序控制下向表中添加行，如下所示：
function addRow(playerName, playerScore)
{
var tableBody = document.getElementById('myTableBody');
var newRow = tableBody.insertRow(tableBody.rows.length);
var nameCell = newRow.insertCell(0);
var scoreCell = newRow.insertCell(1);
var playerText = document.createTextNode(playerName);
var scoreText = document.createTextNode(playerScore);
nameCell.appendChild(playerText);
scoreCell.appendChild(scoreText);
}
这会将新行添加到表体的末尾。按索引移动行也很简单：
function removeRow(rowNumber)
{
var tableBody = document.getElementById('myTableBody');
tableBody.deleteRow(rowNumber);
}
重要要记住的是，只要您删除一行，其余的就会向上移动以取代它。这意味着如果你删除第一个（第0行），那么在完成之后，1将变为0,2将变为1,3将变为2，依此类推。
这意味着如果你想删除前两个，你需要删除索引0两次，而不是你想象的0和1。
至于将数据数组添加到表中，以及添加函数，它现在变得如此简单：
playerList.forEach(function(listItem){
addRow(listItem.name, listItem.ability)
});
如果您需要更改实际的文本数据，则只需执行以下操作：
function changePlayerName(rowNumber, playerName)
{
var tableBody = document.getElementById('myTableBody');
tableBody.Rows[rowNumber].cells[0].innerText = playerName;
}
function changePlayerScore(rowNumber, playerScore)
{
var tableBody = document.getElementById('myTableBody');
tableBody.Rows[rowNumber].cells[1].innerText = playerScore;
}
以这种方式做事，保持代码整洁，易于阅读和理解。当你在一个月内回到它时，你将能够理解你想要达到的目标，并且它将帮助你学习。
还有十几种其他方法可以做到。您可以像在原始版本中一样在所有标记上放置ID，然后通过字符串连接引用它们，您使用的方法，您可以使用具有行ID的类选择器来定位实际的直接元素，您可以使用JQuery太
但是，如果你正在构建一个看起来像游戏的复杂UI，那么我强烈建议使用现代的UI构建系统，如'Aurelia'或'Angular'，两者都使用较新的JS2016 / 2017语法，允许您编写非常简洁的代码，具有易于理解的结构，如“for loops”，“repeat loops”以及现代JavaScript带来的所有其他不错的功能。不要担心与现代UI框架的后向可比性，因为它们中的大多数都将构建与旧浏览器兼容的代码。
虽然我非常相信在你完成这项任务的过程中使用vanilla JavaScript，但如果存在这种可能性，我也相信能让这项任务变得更容易。
答案 3 :(得分：0)
“玩家”+ i + 1的结果将不会如预期的那样。您可以将i + 1存储在变量中，并在getElementById（）中使用它。
var index = i + 1;
var player = document.getElementById("player" + index);
var playerscore = document.getElementById('player' + index + "score")
Here是工作的jsfiddle。