如何将提交表单的计算值展示在另一独立HTML页面上

问题原因 #

• 计算逻辑错误：toFixed() 方法返回字符串类型，直接使用+运算会触发字符串拼接，而非数值累加
• 变量作用域问题：tot 未显式声明，且必须保证提交前computeval()已执行完成，tot才会有有效值
• 第二页仅从localStorage读取了值，未将值插入到页面DOM节点中，所以无法展示
• 表单默认提交行为可能在localStorage存值完成前就触发跳转，导致存值失败

修改后代码 #

页面1 JS代码

// 声明全局变量存储计算结果
let totalResult = ''

function computeval(){
    // 先将输入值转换为数字类型，空输入默认取0
    const distance1 = Number(document.getElementById('distance1').value) || 0;
    const distance2 = Number(document.getElementById('distance2').value) || 0;
    const hotel = Number(document.getElementById('hotel').value) || 0;

    const emair = Number((distance1 * 0.0665).toFixed(2));
    const emland = emair + Number((distance2 * 0.1809).toFixed(0));
    const totalem = emland + Number((hotel * 19.2).toFixed(0));
    // 格式化千分位
    const formattedTotal = totalem.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    totalResult = "Total Emissions (kg) = " + formattedTotal;
    // 本页同步展示结果
    document.getElementById('totalem').innerHTML = totalResult; 
} 

function handleSubmit (e) {
    // 阻止表单默认提交行为
    e.preventDefault();
    // 先执行计算，确保拿到最新结果
    computeval();
    // 结果写入localStorage
    localStorage.setItem('em', totalResult);
    // 手动跳转到结果页
    window.location.href = 'result.html';
}

页面1 HTML代码

<form>
  <button type="submit" class="btnop" onclick="handleSubmit(event)" >Submit</button>
</form>

页面2 JS代码

// 页面加载完成后读取并渲染结果
window.addEventListener('load', () => {
  const emissionVal = localStorage.getItem('em');
  const resultContainer = document.getElementById('result-container');
  if(emissionVal) {
    resultContainer.textContent = emissionVal;
  } else {
    resultContainer.textContent = '未查询到有效计算结果';
  }
  // 可选：读取完成后清除存储数据
  // localStorage.removeItem('em');
})

页面2 HTML代码

<body>
    <h1>Result Page</h1>
    <div id="result-container"></div>
</body>

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