how can i destructure an array that only has data when the user clicks the button?

Question

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.

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>

Answer 1

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.

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.