How can I create a space line (like a br) when user clicks on button?-CodePudding

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.

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

How can I do it?

CodePudding user response：

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 :)

CodePudding user response：

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!