<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--Variables with Player Data-->
<script type="text/javascript">
//Player A
let PlayerAMS = 0
let PlayerATN = 0
// Player B
let PlayerBMS = 0
let PlayerBTN = 0
//Player C
let PlayerCMS = 0
let PlayerCTN = 0
//Player D
let PlayerDMS = 0
let PlayerDTN = 0
//Player E
let PlayerEMS = 0
let PlayerETN = 0
//Player F
let PlayerFMS = 0
let PlayerFTN = 0
//Player G
let PlayerGMS = 0
let PlayerGTN = 0
//Player H
let PlayerHMS = 0
let PlayerHTN = 0
//Player I
let PlayerIMS = 0
let PlayerITN = 0
//Player J
let PlayerJMS = 0
let PlayerJTN = 0
//Player K
let PlayerKMS = 0
let PlayerKTN = 0
//Player L
let PlayerLMS = 0
let PlayerLTN = 0
//Player M
let PlayerMMS = 0
let PlayerMTN = 0
//Player N
let PlayerNMS = 0
let PlayerNTN = 0
//Player O
let PlayerOMS = 0
let PlayerOTN = 0
//Player P
let PlayerPMS = 0
let PlayerPTN = 0
//Player Q
let PlayerQMS = 0
let PlayerQTN = 0
</script>
<table id="dataTable" border="1">
<!-- Headers -->
<tr>
<th>Player Number</th>
<th>Missed Serves</th>
<th>Touched Net</th>
</tr>
<tr>
<td>
<div contenteditable="true">Player Number Here</div>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<div contenteditable="true">Player Number Here</div>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<div contenteditable="true">Player Number Here</div>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<div contenteditable="true">Player Number Here</div>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<div contenteditable="true">Player Number Here</div>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<div contenteditable="true">Player Number Here</div>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<div contenteditable="true">Player Number Here</div>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<div contenteditable="true">Player Number Here</div>
</td>
<td>
</td>
<td></td>
</tr>
<tr>
<td>
<div contenteditable="true">Player Number Here</div>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<div contenteditable="true">Player Number Here</div>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<div contenteditable="true">Player Number Here</div>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<div contenteditable="true">Player Number Here</div>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<div contenteditable="true">Player Number Here</div>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<div contenteditable="true">Player Number Here</div>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<div contenteditable="true">Player Number Here</div>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<div contenteditable="true">Player Number Here</div>
</td>
<td></td>
<td></td>
</tr>
</table>
<button type="button" onclick="incrementAMS()">Increment Player 1 MS</button>
<button type="button" onclick="DecrementAMS()">Decrement Player 1 MS</button>
<button class="button" onclick="update()">Update</button>
<script type="text/javascript">
let array = [[PlayerAMS, PlayerATN],
[PlayerBMS, PlayerBTN],
[PlayerCMS, PlayerCTN],
[PlayerDMS, PlayerDTN],
[PlayerEMS, PlayerETN],
[PlayerFMS, PlayerFTN],
[PlayerGMS, PlayerGTN],
[PlayerHMS, PlayerHTN],
[PlayerIMS, PlayerITN],
[PlayerJMS, PlayerJTN],
[PlayerKMS, PlayerKTN],
[PlayerLMS, PlayerLTN],
[PlayerMMS, PlayerMTN],
[PlayerNMS, PlayerNTN],
[PlayerOMS, PlayerOTN],
[PlayerPMS, PlayerPTN],
[PlayerQMS, PlayerQTN],
]
console.log(array)
table = document.getElementById("dataTable");
function update() {
// rows
for (let i = 1; i < table.rows.length; i ) {
// cells
for (let j = 1; j < table.rows[i].cells.length; j ) {
table.rows[i].cells[j].innerHTML = array[i][j - 1];
}
}
}
function incrementAMS(){
PlayerAMS ;
console.log(PlayerAMS);
}
function incrementATN(){
PlayerATN ;
console.log(PlayerATN);
}
function DecrementAMS(){
PlayerAMS--;
console.log(PlayerAMS);
}
function DecrementATN(){
PlayerATN--;
console.log(PlayerATN);
}
</script>
</body>
</html>
我正在制作一個表格，只需按下一個按鈕，單元格內的特定值就會增加。我擁有的功能確實做到了這一點，正如我在控制臺中檢查時增加的值所證明的那樣。但是，我不能讓它顯示在表格中，并且單元格中的值只是保持為 0。我怎樣才能使它的值實時增加，或者在我點擊更新按鈕之后？
uj5u.com熱心網友回復：
陣列從零開始。
table.rows[i].cells[j].innerHTML = array[i-1][j - 1];
您正在更新PlayerAMS但陣列值正在用于顯示。您可以更改索引以更新其他玩家。您還應該像這樣更改遞減函式。
function incrementAMS(){
array[0][0] ;
console.log(array[0][0]);
update();
}
uj5u.com熱心網友回復：
您的代碼有（至少）2 個問題。
您正在更新 PlayerAMS。但是在 javascript 中，原始型別不是作為參考分配的，而是通過值分配的。這意味著您的陣列不是指向 PlayerXXX 的指標陣列，而是在創建時復制的值陣列。所以你也需要更新陣列。
您對陣列 (i) 的索引錯誤
我已經使用您自己的代碼樣式稍微修改了您的更新功能，以獲得您可能想要獲得的功能。但是，我不得不說，目前還遠非理想。繼續努力吧:)
function update() {
array = [[PlayerAMS, PlayerATN],
[PlayerBMS, PlayerBTN],
[PlayerCMS, PlayerCTN],
[PlayerDMS, PlayerDTN],
[PlayerEMS, PlayerETN],
[PlayerFMS, PlayerFTN],
[PlayerGMS, PlayerGTN],
[PlayerHMS, PlayerHTN],
[PlayerIMS, PlayerITN],
[PlayerJMS, PlayerJTN],
[PlayerKMS, PlayerKTN],
[PlayerLMS, PlayerLTN],
[PlayerMMS, PlayerMTN],
[PlayerNMS, PlayerNTN],
[PlayerOMS, PlayerOTN],
[PlayerPMS, PlayerPTN],
[PlayerQMS, PlayerQTN],
]
// rows
for (let i = 1; i < table.rows.length; i ) {
// cells
for (let j = 1; j < table.rows[i].cells.length; j ) {
table.rows[i].cells[j].innerHTML = array[i-1][j - 1];
}
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/334969.html
標籤：javascript
下一篇：如何創建具有相同內容的新陣列？