I need help so I can distribute the #aporte (total) in the amount of people entered in the button (I can´t use an input type number, I need to use the input type text and when you enter a name and click on the button, it will be added to the distribution). I really don´t know how to do it, here´s the code:
HTML:
<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>
script:
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}`;
};
You can try it :
const arr = []
const nombre = document.getElementById("nombre")
const monto = document.getElementById("monto")
const total = document.getElementById("total")
const final = document.getElementById("final")
const aporte = document.getElementById("aporte")
const list = document.getElementById("list")
const average = document.getElementById("average")
function ir() {
let nombreVal = nombre.value
let montoVal = monto.value
if(nombreVal === '' || montoVal === '') return
let exist = arr.find(({name, score}) => name === nombreVal)
if (exist) {
exist.score = Number(montoVal)
} else {
arr.push({name:nombreVal, score: montoVal})
}
let totalScore = arr.reduce((total, ele) => total += Number(ele.score), 0)
let totalPeople = arr.length
list.textContent = '';
arr.forEach(ele => {
let nodeNombre = document.createElement('p')
nodeNombre.innerHTML = ele.name + ': ' + ele.score
list.appendChild(nodeNombre);
})
final.innerHTML = `${totalScore}`;
aporte.innerHTML = `${totalPeople}`;
average.innerHTML = `average : ${totalScore/totalPeople}`
};<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="list"></div>
<div id="total"></div>
<div id="total-people"></div>
<p id="average"></p>
<p>A cada uno le toca aportar: <span id="aporte"></span></p>