How can I make a function divide the total money by the total of names entered on the button?

I only need a function so that I can divide #total by the total of names that were entered on the button. If you know the answer please help me, I’m a newbie in Javascript.

function ir() {

  const nombre = document.getElementById("nombre").value;

  let monto = document.getElementById("monto").value;

  const total = document.getElementById("total");
  const final = document.getElementById("final");
  const aporte = document.getElementById("aporte");

  const lineBreak = document.createElement("br");
  let newTotal = document.createTextNode(` ${nombre} : ${monto} `);
  total.appendChild(lineBreak);
  total.appendChild(newTotal);

  monto = Number(monto) + Number(final.innerHTML);

  final.innerHTML = `${monto}`;
  aporte.innerHTML = `${monto}`;
};

JavaScript
​x
 
function ir() {
​
  const nombre = document.getElementById("nombre").value;
​
  let monto = document.getElementById("monto").value;
​
  const total = document.getElementById("total");
  const final = document.getElementById("final");
  const aporte = document.getElementById("aporte");
​
  const lineBreak = document.createElement("br");
  let newTotal = document.createTextNode(` ${nombre} : ${monto} `);
  total.appendChild(lineBreak);
  total.appendChild(newTotal);
​
  monto = Number(monto) + Number(final.innerHTML);
​
  final.innerHTML = `${monto}`;
  aporte.innerHTML = `${monto}`;
};

<h1>Expenses app</h1>
<p>Enter how much each person spent</p>
<p>Nombre</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="total">
</div>
<p>A cada uno le toca aportar: <span id="aporte"></span></p>

JavaScript
 
<h1>Expenses app</h1>
<p>Enter how much each person spent</p>
<p>Nombre</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="total">
</div>
<p>A cada uno le toca aportar: <span id="aporte"></span></p>

Answer

i hope this fast written solution helps you.

var Persons = [];
window.onload = () => {

    var PersonHTMLElement = document.getElementById("person");
    var AmountHTMLElement = document.getElementById("amount");
    var TotalHTMLElement = document.getElementById("total");
    var PersonListHTMLElement = document.getElementById("final");
    var TotalDividedHTMLElement = document.getElementById("aporte");

    document.getElementById("calc").addEventListener("click", setPerson);

    function setPerson(){

        let person = PersonHTMLElement.value;
        let amount = AmountHTMLElement.value;

        Persons.push({
            Name:person,
            Amount:parseFloat(amount)
        });

        PersonHTMLElement.value = "";
        AmountHTMLElement.value = "";
    
        setTotal();
    }
    function setTotal(){

        TotalHTMLElement.innerHTML = "";

        let PersonsList = "";
        let Total = 0;
        for(let i = 0;i < Persons.length; i++){
            Total += Persons[i].Amount;
            PersonsList += `${Persons[i].Name}: ${Persons[i].Amount} <br>`;
        }
        
        TotalHTMLElement.innerHTML = PersonsList;
        PersonListHTMLElement.innerHTML = Total;
        TotalDividedHTMLElement.innerHTML = Total / Persons.length;
    }
}

JavaScript
 
var Persons = [];
window.onload = () => {
​
    var PersonHTMLElement = document.getElementById("person");
    var AmountHTMLElement = document.getElementById("amount");
    var TotalHTMLElement = document.getElementById("total");
    var PersonListHTMLElement = document.getElementById("final");
    var TotalDividedHTMLElement = document.getElementById("aporte");
​
    document.getElementById("calc").addEventListener("click", setPerson);
​
    function setPerson(){
​
        let person = PersonHTMLElement.value;
        let amount = AmountHTMLElement.value;
​
        Persons.push({
            Name:person,
            Amount:parseFloat(amount)
        });
​
        PersonHTMLElement.value = "";
        AmountHTMLElement.value = "";
    
        setTotal();
    }
    function setTotal(){
​
        TotalHTMLElement.innerHTML = "";
​
        let PersonsList = "";
        let Total = 0;
        for(let i = 0;i < Persons.length; i++){
            Total += Persons[i].Amount;
            PersonsList += `${Persons[i].Name}: ${Persons[i].Amount} <br>`;
        }
        
        TotalHTMLElement.innerHTML = PersonsList;
        PersonListHTMLElement.innerHTML = Total;
        TotalDividedHTMLElement.innerHTML = Total / Persons.length;
    }
}

<html>
    <head>
        <script src="myscript.js"></script>
    </head>
    <body>
        <h1>Expenses app</h1>
        <p>Enter how much each person spent</p>

        <p>Nombre</p>
        <input type="text" id="person">
        <br>
        <p>Monto</p>
        <input type="number" id="amount">
        <br>
        <br>
        <button id="calc">Enviar</button>
        <br>
        <p>Total: <span id="final"></span> </p>
        <div id="total">
        </div>
        <p>A cada uno le toca aportar: <span id="aporte"></span></p>
    </body>
</html>

JavaScript
 
<html>
    <head>
        <script src="myscript.js"></script>
    </head>
    <body>
        <h1>Expenses app</h1>
        <p>Enter how much each person spent</p>
​
        <p>Nombre</p>
        <input type="text" id="person">
        <br>
        <p>Monto</p>
        <input type="number" id="amount">
        <br>
        <br>
        <button id="calc">Enviar</button>
        <br>
        <p>Total: <span id="final"></span> </p>
        <div id="total">
        </div>
        <p>A cada uno le toca aportar: <span id="aporte"></span></p>
    </body>
</html>

Advertisement

Answer