how can we display html form values as many times as the user insert them by pressing submit button-CodePudding

    <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"  id ="Passenger-weight"  placeholder="Please enter passengers weight"><br>
        <label for="cargo-weight">cargo weight:   </label>
        <input type="number"   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>

my problem can be numbered: number 1: when I press the submit button, input values show up, BUT when I want to insert a different data, the previous one disappear. I studied about it, because whatever comes in the function scope become local we cannot apply it outside, BUT I don't know how to change it. number 2: I want to have the sum of total weights I insert at the end of my list, I know we can do this by loop, BUT I need something simpler and more preliminary because I am a novice and it would be a big jump for the time being. all in all, I would be happy if anyone could help me.

CodePudding user response：

Here is the primary and most basic approach.

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"  id="Passenger-weight" placeholder="Please enter passengers weight"><br>
  <label for="cargo-weight">cargo weight: </label>
  <input type="number"  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>