How can I create a space line (like a br) when user clicks on button?
Question
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?
2 answers
solution1
1 ACCPTED 2022-06-04 02:05:39
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 :)
solution2
0 2022-06-04 02:11:29
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!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.