如何根据下拉值 + 计算更新 HTML 表格？

Question

我正在尝试构建一个非常简单的应用程序来跟踪我的排球队的排名。 有四个下拉菜单，两个用于获胜对，两个用于失败对。 我能够显示赢家和输家，并且我已经建立了一个包含四列和一个示例行的简单表格：

Player | Games | Points | Points per game
Felix      0        0            0

我现在想做什么以及我被困在哪里：

点击“提交结果”后

将每个玩过游戏的玩家的游戏数量加 1
获胜者的积分加1
更新每场比赛积分（即总积分除以比赛场数）
以某种方式存储表的当前状态（通过数据库，或 .json 文件或其他什么？），以便我们可以在夏天继续向其中添加游戏（我使用 Replit，它为应用程序提供始终开启的功能，如果这有帮助）

 const button = document.getElementById('btn'); const players = ["Laura", "Felix", "Martin", "Hanna", "Simon", "Nora", "Dennis", "David", "Giulia G.", "Giulia M.", "Jackie"]; button.addEventListener("click", async function() { logGame(dropDowns); }) //Populate dropdown menus let dropDowns = ["player1", "player2", "player3", "player4"]; for (let i = 0; i < dropDowns.length; i++) { let playerDropDown = document.getElementById(dropDowns[i]); for (let i = 0; i < players.length; i++) { let option = document.createElement("option"); option.value = players[i]; option.text = players[i]; playerDropDown.appendChild(option); }; }; let winners = [] let losers = [] function logGame(dropDowns) { for (i = 0; i < dropDowns.length; i++) { let select = document.getElementById(dropDowns[i]) let player = select.options[select.selectedIndex].value; i <= 1 ? winners.push(player) : losers.push(player) } return winners, losers }

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Volleyball</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <form id="game"> <div class="form-container"> <!-- <p>Neuer Spieler:</p> <input id="name" class="form-field__short" type="name" name="name"> --> <p>Won</p> <p>Player 1</p> <select id="player1" class="form-field__full" name="player1"> <option></option> </select> <p>Player 2</p> <select id="player2" class="form-field__full" name="player2"> <option></option> </select> <p>Lost</p> <p>Player 3</p> <select id="player3" class="form-field__full" name="player3"> <option></option> </select> <p>Player 4</p> <select id="player4" class="form-field__full" name="player4"> <option></option> </select> <p></p> <div id="btn">Submit result</div> </div> </form> <table> <thead> <tr> <th>Player</th> <th>Points</th> <th>Games</th> <th>Points per game</th> </tr> </thead> <tbody> <tr> <td>Felix</td> <td>0</td> <td>0</td> <td>0</td> </tr> </tbody> </table> <script src="script.js"></script> </body> </html>

Answer 1

小心嵌套的 for 和索引名称。 当你嵌套循环时，你真的应该为计数器使用不同的字母： for (let i...) { for (let j ....}}我知道let可能会在这里保存你，但为了可读性。在一个循环你忘记了 var/let，这使i成为一个全局变量
select.options[select.selectedIndex].value; 与select.value相同
为什么是async function() ？ 这里没有异步

这是一个更容易更新的简化版本

 const game = document.getElementById('game'); const dropDowns = document.querySelectorAll('select.form-field__full') const players = ["Laura", "Felix", "Martin", "Hanna", "Simon", "Nora", "Dennis", "David", "Giulia G.", "Giulia M.", "Jackie"]; game.addEventListener("submit", logGame) //Populate dropdown menus dropDowns.forEach(dd => dd.innerHTML = players.map(player => `<option value="${player}">${player}</option>`).join('')); function logGame(e) { e.preventDefault(); // cancel submit for now, later we can Ajax let winners = [] let losers = [] dropDowns.forEach((dd, i) => { if (i <= 1) winners.push(dd.value) else losers.push(dd.value) }) console.log(winners, losers) }

 <form id="game"> <div class="form-container"> <!-- <p>Neuer Spieler:</p> <input id="name" class="form-field__short" type="name" name="name"> --> <p>Won</p> <p>Player 1</p> <select id="player1" class="form-field__full" name="player1"> <option></option> </select> <p>Player 2</p> <select id="player2" class="form-field__full" name="player2"> <option></option> </select> <p>Lost</p> <p>Player 3</p> <select id="player3" class="form-field__full" name="player3"> <option></option> </select> <p>Player 4</p> <select id="player4" class="form-field__full" name="player4"> <option></option> </select> <p></p> <button id="btn">Submit result</button> </div> </form> <table> <thead> <tr> <th>Player</th> <th>Points</th> <th>Games</th> <th>Points per game</th> </tr> </thead> <tbody> <tr> <td>Felix</td> <td>0</td> <td>0</td> <td>0</td> </tr> </tbody> </table>

如何根据下拉值 + 计算更新 HTML 表格？

问题描述

1 个解决方案

解决方案1
0 已采纳 2021-07-06 17:17:21

如何根据下拉值 + 计算更新 HTML 表格？

问题描述

1 个解决方案

解决方案1 0 已采纳 2021-07-06 17:17:21

解决方案1
0 已采纳 2021-07-06 17:17:21