当用户单击按钮时，如何解构只有数据的数组？

Question

我需要解构我的数组“persons”以显示，例如，用户输入的第一个人，但如果它没有对象，我不知道该怎么做，直到用户单击计算按钮。

这是我的代码：

 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>

Answer 1

最基本的验证是简单地检查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>

这将使您的代码段正常工作，但您很可能希望以此为基础向用户提供反馈，表明必填字段留空。 SO上有很多关于输入验证的重复问题。