如何根据下拉值 + 计算更新 HTML 表格？
[英]How can I update an HTML table based on dropdown values + calculation?
问题描述
I'm trying to build a very simple app to keep track of the standings of my volleyball group.
我正在尝试构建一个非常简单的应用程序来跟踪我的排球队的排名。 There are four dropdowns, two for the winning pair and two for the losing pair.有四个下拉菜单，两个用于获胜对，两个用于失败对。 I'm able to display the winners and losers, and I've set up a simple table with four columns and an example row:我能够显示赢家和输家，并且我已经建立了一个包含四列和一个示例行的简单表格：
Player | Games | Points | Points per game
Felix 0 0 0
What I would like to do now and where I'm stuck:我现在想做什么以及我被困在哪里：
After clicking "Submit result"点击“提交结果”后
- Add 1 to the number of games for each player that played in the game将每个玩过游戏的玩家的游戏数量加 1
- Add 1 to the number of points of the winners获胜者的积分加1
- Update points per game (ie, divide the total number of points by the number of games)更新每场比赛积分（即总积分除以比赛场数）
- Somehow store the current state of the table (via a database, or a .json file or something else?), so that we can continue adding games to it during the summer (I use Replit which offers an always on function for apps, if that helps)以某种方式存储表的当前状态（通过数据库，或 .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>
1 个解决方案
解决方案1
0 已采纳 2021-07-06 17:17:21
Be careful with nested for and index names.
小心嵌套的 for 和索引名称。 When you nest loops, you really should use different letters for counters: for (let i...) { for (let j ....}}I know theletmay save you here, but for the sake of readability. In one loop you forget the var/let and that makesia global var当你嵌套循环时，你真的应该为计数器使用不同的字母： for (let i...) { for (let j ....}}我知道let可能会在这里保存你，但为了可读性。在一个循环你忘记了 var/let，这使i成为一个全局变量select.options[select.selectedIndex].value;is the same asselect.value与select.value相同Why
async function()?为什么是async function()？ Nothing async here这里没有异步
Here is a simplified version easier to update这是一个更容易更新的简化版本
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.