我们如何在用户每次按下提交按钮时多次显示 html 表单值？

Question

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

我的问题可以编号：数字1：当我按下提交按钮时，输入值会显示，但是当我想插入不同的数据时，前一个会消失。 我研究了它，因为函数范围内的任何东西都变成了本地的，我们不能在外面应用它，但我不知道如何改变它。 数字 2：我想在列表末尾插入总权重的总和，我知道我们可以循环执行此操作，但我需要一些更简单和更初步的东西，因为我是新手，这将是一个很大的飞跃暂且。 总而言之，如果有人可以帮助我，我会很高兴。

Answer 1

这是主要和最基本的方法。

 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>

我们如何在用户每次按下提交按钮时多次显示 html 表单值？

问题描述

1 个解决方案

解决方案1
1 已采纳 2022-06-07 11:56:47

我们如何在用户每次按下提交按钮时多次显示 html 表单值？

问题描述

1 个解决方案

解决方案1 1 已采纳 2022-06-07 11:56:47

解决方案1
1 已采纳 2022-06-07 11:56:47