本地运行HTML文件提交表单后地址变化不显示结果如何解决

• 表单默认的提交行为会触发页面刷新，你点击submit按钮后，JS刚执行完结果渲染逻辑，页面就被刷新重置，所以看不到输出结果
• 现有计算逻辑存在冗余，同时输入值为字符串类型，未做数值转换可能导致计算异常

修复点1：阻止表单默认刷新行为 #

两种可选方案：

• 方案A：将提交按钮的type从submit改为普通按钮button，取消默认提交动作

<input type="button" value="Submit" onclick="printResult()">

• 方案B：给form标签添加onsubmit事件阻止默认行为

<form onsubmit="return false;">

修复点2：修正计算逻辑与输入类型转换 #

你当前的计算逻辑(((220 - age) - restHR)) + restHR等效于220 - age，属于冗余计算。如果是要计算标准储备心率法的目标心率，正确公式应为：(220 - 年龄 - 静息心率) * 运动强度 + 静息心率，你可以根据需求调整强度系数。
另外需要把输入的字符串值转为数字，避免出现字符串拼接的异常。
修正后的JS代码参考：

const calTargetHR = (age, restHR, intensity = 0.6) => {
    // intensity为运动强度，默认取中等强度0.6，可按需调整
    age = Number(age)
    restHR = Number(restHR)
    return Math.round(((220 - age) - restHR) * intensity + restHR)
}
const printResult = () => {
    const age = document.getElementById('age').value
    const restHR = document.getElementById('restHR').value
    // 简单非空校验
    if (!age || !restHR) {
        document.getElementById("output").innerHTML = "请输入完整的年龄和静息心率"
        return
    }
    document.getElementById("output").innerHTML = `目标心率：${calTargetHR(age, restHR)} 次/分钟`
}

修改完成后刷新页面重新测试，即可正常展示计算结果。

<html>
<head>
    <title>Heart rate</title>
</head>
<body>
    <form onsubmit="return false;">
        <label for="age">Age: </label>
        <input type="text" id="age" name="age"><br><br>
        <label for="restHR">Resting HR: </label>
        <input type="text" id="restHR" name="restHR"><br><br>
        <input type="submit" value="Submit" onclick="printResult()">
    </form>
    <div id='output'></div>
    <script>
        const calTargetHR = (age, restHR, intensity = 0.6) => {
            age = Number(age)
            restHR = Number(restHR)
            return Math.round(((220 - age) - restHR) * intensity + restHR)
        }
        const printResult = () => {
            const age = document.getElementById('age').value
            const restHR = document.getElementById('restHR').value
            if (!age || !restHR) {
                document.getElementById("output").innerHTML = "请输入完整的年龄和静息心率"
                return
            }
            document.getElementById("output").innerHTML = `目标心率：${calTargetHR(age, restHR)} 次/分钟`
        }
    </script>
</body>
</html>

内容的提问来源于stack exchange，提问作者one-hand-octopus