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}`;
};<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>
Advertisement
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;
}
}<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>