[英]how can i destructure an array that only has data when the user clicks the button?
I need to destructure my array "persons" to show, for example, the first person entered by the user, but i don´t know how to do it if it doesn´t have objects until the user click the calculate button.我需要解构我的数组“persons”以显示,例如,用户输入的第一个人,但如果它没有对象,我不知道该怎么做,直到用户单击计算按钮。
Here's my code:这是我的代码:
const persons = [] let nameHTMLelemento = document.getElementById("name") let amountHTMLelemento = document.getElementById("amount") let totalHTMLelemento = document.getElementById("total") let personsListHTMLelemento = document.getElementById("each-person") let splitHTMLelemento = document.getElementById("split") document.getElementById("calculate").addEventListener("click", enterPerson) function enterPerson() { let person = nameHTMLelemento.value; let amount = amountHTMLelemento.value; persons.push({ name: person, amount: parseFloat(amount), }); nameHTMLelemento.value = ""; amountHTMLelemento.value = ""; defineTotal(); } function defineTotal() { let list = ""; let total = 0; for (let i = 0; i < persons.length; i++) { total += persons[i].amount list += `${persons[i].name}: ${persons[i].amount} <br>`; } let iva = 1.21 totalHTMLelemento.innerHTML = total * iva; personsListHTMLelemento.innerHTML = list; splitHTMLelemento.innerHTML = (total * iva) / persons.length; }
<div class="card-container"> <h1>splitter bill</h1> <p>enter the name of the person and his amount (21% of iva included):</p> <label id="name-text">Nombre</label> <br> <input type="text" id="name"> <br> <label id="monto-texto">amount</label> <br> <input type="number" id="amount"> <br> <button id="calculate">Ingresar</button> <p>Total: <span id="total"></span> </p> <div id="each-person"> </div> <p> Cada uno le toca aportar: <span id="split"></span> </p> </div> <script src="main.js"></script>
The most basic validation would be to simply check if person
is empty or if parseFloat(amount)
is NaN
and return early if either is true.最基本的验证是简单地检查
person
是否为空或parseFloat(amount)
是否为NaN
,如果其中任何一个为真,则提前返回。
function enterPerson() {
let person = nameHTMLelemento.value;
let amount = amountHTMLelemento.value;
if (person === '' || isNaN(parseFloat(amount))) {
return false;
}
persons.push({
name: person,
amount: parseFloat(amount),
});
// ...
}
const persons = [] let nameHTMLelemento = document.getElementById("name") let amountHTMLelemento = document.getElementById("amount") let totalHTMLelemento = document.getElementById("total") let personsListHTMLelemento = document.getElementById("each-person") let splitHTMLelemento = document.getElementById("split") document.getElementById("calculate").addEventListener("click", enterPerson) function enterPerson() { let person = nameHTMLelemento.value; let amount = amountHTMLelemento.value; if (person === '' || isNaN(parseFloat(amount))) { return false; } persons.push({ name: person, amount: parseFloat(amount), }); nameHTMLelemento.value = ""; amountHTMLelemento.value = ""; defineTotal(); } function defineTotal() { let list = ""; let total = 0; for (let i = 0; i < persons.length; i++) { total += persons[i].amount list += `${persons[i].name}: ${persons[i].amount} <br>`; } let iva = 1.21 totalHTMLelemento.innerHTML = total * iva; personsListHTMLelemento.innerHTML = list; splitHTMLelemento.innerHTML = (total * iva) / persons.length; }
<div class="card-container"> <h1>splitter bill</h1> <p>enter the name of the person and his amount (21% of iva included):</p> <label id="name-text">Nombre</label> <br> <input type="text" id="name"> <br> <label id="monto-texto">amount</label> <br> <input type="number" id="amount"> <br> <button id="calculate">Ingresar</button> <p>Total: <span id="total"></span> </p> <div id="each-person"> </div> <p> Cada uno le toca aportar: <span id="split"></span> </p> </div> <script src="main.js"></script>
This will get your snippet working, but you'll most likely want to build on this to provide feedback to the user indicating that a required field was left blank.这将使您的代码段正常工作,但您很可能希望以此为基础向用户提供反馈,表明必填字段留空。 There are plenty of duplicate questions on SO covering input validation.
SO上有很多关于输入验证的重复问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.