JavaScript实现动态费用分摊计算器：处理文本输入与参与者管理

<h1>Expenses app</h1> <p>Enter how much each person spent</p>  <p>Nombre</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/c1c2c2ed740f" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">Java免费学习笔记（深入）</a>”；</p> <input type="text" id="nombre"> <br> <p>Monto</p> <input type="number" id="monto"> <br> <button onclick="ir()">Enviar</button> <br> <p>Total: <span id="final"></span> </p> <div id="list"></div> <p id="average"></p> <p>A cada一人le toca aportar: <span id="aporte"></span></p>

const arr = []; // 用于存储所有参与者数据的数组 const nombreInput = document.getElementById("nombre"); // 姓名输入框 const montoInput = document.getElementById("monto"); // 金额输入框 const listDiv = document.getElementById("list"); // 显示参与者列表的div const finalspan = document.getElementById("final"); // 显示总金额的span const aporteSpan = document.getElementById("aporte"); // 显示参与人数的span const averageP = document.getElementById("average"); // 显示人均金额的p  /**  * 处理用户提交的函数。  * 获取输入值，更新参与者列表，并重新计算总额、人数和人均分摊。  */ function ir() {     let nombreVal = nombreInput.value.trim(); // 获取姓名并去除首尾空格     let montoVal = montoInput.value.trim(); // 获取金额并去除首尾空格      // 1. 输入校验：确保姓名和金额都不为空     if (nombreVal === '' || montoVal === '') {         alert("姓名和金额都不能为空，请输入有效信息。");         return;     }      // 将金额转换为数字，确保后续计算的正确性     let parsedMonto = Number(montoVal);     if (isNaN(parsedMonto) || parsedMonto < 0) {         alert("请输入有效的正数金额。");         return;     }      // 2. 查找并更新或添加参与者     let exist = arr.find(person => person.name === nombreVal);     if (exist) {         // 如果参与者已存在，则更新其金额         exist.score = parsedMonto;     } else {         // 如果参与者不存在，则添加新参与者         arr.push({ name: nombreVal, score: parsedMonto });     }      // 3. 计算总支出和参与人数     let totalScore = arr.reduce((total, ele) => total += ele.score, 0);     let totalPeople = arr.length;      // 4. 更新参与者列表显示     listDiv.textContent = ''; // 清空现有列表     arr.foreach(ele => {         let nodeNombre = document.createElement('p');         nodeNombre.innerHTML = `${ele.name}: ${ele.score.toFixed(2)}`; // 格式化金额显示         listDiv.appendChild(nodeNombre);     });      // 5. 更新总金额、参与人数和人均分摊金额的显示     finalSpan.innerHTML = `${totalScore.toFixed(2)}`;     aporteSpan.innerHTML = `${totalPeople}`;      if (totalPeople > 0) {         averageP.innerHTML = `人均分摊: ${(totalScore / totalPeople).toFixed(2)}`;     } else {         averageP.innerHTML = `人均分摊: 0.00`;     }      // 6. 清空输入框，方便下次输入     nombreInput.value = '';     montoInput.value = '';     nombreInput.focus(); // 将焦点设置回姓名输入框 }