<form action="#"></form> <label for="First-name">First name: </label> <input type="text" id="First-name" placeholder="Please insert fiid."><br> <label for="Second-name">Second name: </label> <input type="text" id="Second-name" placeholder="Please insert second name"> <br> <label for="Passenger-weight">Passengers weight: </label> <input type="number" class="weight" id ="Passenger-weight" placeholder="Please enter passengers weight"><br> <label for="cargo-weight">cargo weight: </label> <input type="number" class="weight" id ="cargo-weight" placeholder="Please enter cargo weight"><br> <input type="submit" id ="submit" ><br> </form> <p id="sum"></p> <div id="sumoftotal"></div> <body> <script language="JavaScript"> document.getElementById("submit").onclick=function (){ let firstName = document.getElementById("First-name").value; let lastName= document.getElementById("Second-name").value; let num1 = document.getElementById("Passenger-weight").value; let num2 = document.getElementById("cargo-weight").value; let total =parseInt(num1) + parseInt(num2); document.getElementById("sum").innerHTML=(`${firstName} ${lastName} ${total }`) } </script> </body>mi problema se puede numerar: número 1: cuando presiono el botón enviar, aparecen los valores de entrada, PERO cuando quiero insertar un dato diferente, el anterior desaparece. Estudié al respecto, porque lo que sea que venga en el alcance de la función se vuelve local, no podemos aplicarlo afuera, PERO no sé cómo cambiarlo. número 2: quiero tener la suma de los pesos totales que inserto al final de mi lista, sé que podemos hacer esto por bucle, PERO necesito algo más simple y preliminar porque soy un novato y sería un gran salto Siendo por el momento. en definitiva, me encantaría que alguien pudiera ayudarme.
Aquí está el enfoque principal y más básico.
var data = document.getElementById('data'); var weightElement = document.getElementById('total-weight'); document.getElementById("submit").onclick = function() { /* Getting data */ let firstName = document.getElementById("First-name").value; let lastName = document.getElementById("Second-name").value; let num1 = document.getElementById("Passenger-weight").value; let num2 = document.getElementById("cargo-weight").value; let total = parseInt(num1) + parseInt(num2); /* Appending element */ data.innerHTML = data.innerHTML + `First Name - ${firstName}, Last Name - ${lastName}, Weight - ${total} <br/>`; weightElement.innerHTML = parseInt(weightElement.innerHTML) + total; } <body> <form action="#"></form> <label for="First-name">First name: </label> <input type="text" id="First-name" placeholder="Please insert fiid."><br> <label for="Second-name">Second name: </label> <input type="text" id="Second-name" placeholder="Please insert second name"> <br> <label for="Passenger-weight">Passengers weight: </label> <input type="number" class="weight" id="Passenger-weight" placeholder="Please enter passengers weight"><br> <label for="cargo-weight">cargo weight: </label> <input type="number" class="weight" id="cargo-weight" placeholder="Please enter cargo weight"><br> <input type="submit" id="submit"><br> </form> <div id="data"></div> <div>Total weight = <span id="total-weight">0</span></div> </body>