I need a javascript function or really anything so when the user put names in the input type text, it puts the text on a paragraph below #final and so on continuosly adding a space whenever the user clicks the button.
function ir() {
let nombre = document.getElementById("nombre").value;
let monto = document.getElementById("monto").value;
let total = document.getElementById("total");
let final = document.getElementById("final");
let aporte = document.getElementById("aporte");
for (i = 0; i < monto; i++) {
total.innerText = ` ${nombre} : ${monto}`;
};
if (total > 0) {
monto + monto
}
final.innerHTML = `${monto}`;
aporte.innerHTML = `${monto}`;
};<html>
<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>
</div>
</html>How can I do it?
Welcome to StackOverflow,
Try this function:
function ir() {
// Set everything to const because they don't change and it's good practise
const nombre = document.getElementById("nombre").value;
// Monto changes below, so we can use LET!!
let monto = document.getElementById("monto").value;
const total = document.getElementById("total");
const final = document.getElementById("final");
const aporte = document.getElementById("aporte");
// Create new element under total
const lineBreak = document.createElement("br");
let newTotal = document.createTextNode(` ${nombre} : ${monto} `);
total.appendChild(lineBreak);
total.appendChild(newTotal);
// Set monto to monto + the value already there
// Use Number to make it number (without Number it's string, 1+2 = 12 and not 3)
monto = Number(monto) + Number(final.innerHTML);
final.innerHTML = `${monto}`;
aporte.innerHTML = `${monto}`;
};
What it does is it creates a new element beneath total and updates it each time the user clicks the button.
The total is also updated too...
Is this what you wanted? I hope it helped :)
One potential way to do this would be to check the values of nombre and monto. If they are empty (or just spaces), we can create and append a <br> element.
if (monto.trim() == "" || nombre.trim() == "") {
let lineBreak = document.createElement("BR");
total.appendChild(lineBreak);
I'm not exactly sure which element you wanted to append this to, so change it accordingly to element.appendChild(createdElementName).
Hope I was able to help!