如何实现点击提交多次展示HTML表单值不覆盖并累计总重量

问题根因说明 #

你遇到的问题不止是变量作用域的问题，原代码有3个显性错误：

• HTML结构写错：<form>标签第一行就提前闭合（<form action="#"></form>），且<body>标签位置错误，所有表单控件、展示节点都写在了body标签外面，不符合HTML规范
• submit按钮默认会触发表单提交刷新页面，刷新后之前JS渲染的页面内容会全部重置
• 给结果节点赋值时用=直接覆盖属性值，就算不刷新页面，新提交的内容也会直接替换掉旧内容，不会保留历史记录

具体修复方法 #

1. 保留历史提交记录 #

• 先修正HTML结构：把提前闭合的form起始标签改对，所有页面可见内容全部包裹在<body>标签内部，表单控件全部放到form标签内部
• 给submit点击事件加阻止默认行为的逻辑，禁止页面刷新
• 渲染单条记录时用+=做内容追加，不要用=直接覆盖，每条记录末尾加换行标签做排版
• 每次提交成功后清空输入框，方便下一次录入

2. 展示所有重量累计总和（无循环实现） #

不需要写循环遍历，只要在点击事件的外部定义一个全局累计变量，初始值设为0。每次提交计算出当前单条的乘客+货物总重量后，直接把当前单条重量加到累计变量上，再把累计值渲染到总重展示节点即可。

修复后完整代码 #

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>重量统计表单</title>
</head>
<body>
    <form action="#">
        <label for="First-name">First name: </label>
        <input type="text" id="First-name" placeholder="Please insert first name."><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>

    <script>
        // 全局累计总重，定义在事件外，不会因为函数执行结束被重置
        let allWeightTotal = 0;
        document.getElementById("submit").onclick = function(e){
            // 阻止表单默认提交刷新行为
            e.preventDefault();
            // 获取表单值
            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;
            // 计算单条总重，做空值兜底，没输入值默认按0计算
            let currentTotal = parseInt(num1 || 0) + parseInt(num2 || 0); 
            // 追加单条记录，不覆盖之前的内容
            document.getElementById("sum").innerHTML += `${firstName} ${lastName} 本次录入总重：${currentTotal}kg<br>`;
            // 累加总重
            allWeightTotal += currentTotal;
            // 渲染累计总重
            document.getElementById("sumoftotal").innerText = `所有记录累计总重量：${allWeightTotal}kg`;
            // 清空输入框
            document.getElementById("First-name").value = '';
            document.getElementById("Second-name").value = '';
            document.getElementById("Passenger-weight").value = '';
            document.getElementById("cargo-weight").value = '';
        }
    </script> 
</body>
</html>

代码额外加了空值兜底逻辑：如果重量输入框没填值，会默认按0计算，不会出现NaN的异常结果；同时修正了原代码里First name输入框的placeholder拼写错误。

内容的提问来源于stack exchange，提问作者honey