Flask+JavaScript开发BMI计算按钮触发页面重载无结果问题咨询

问题根因 #

你遇到的页面重载、地址栏追加?的现象是表单默认提交行为触发导致的：

• HTML规范中，位于<form>标签内部的<button>如果没有显式声明type属性，默认值为submit，点击后会自动触发所属表单的提交操作；如果表单没有配置action属性、提交方法为默认的GET，就会出现页面重载、地址栏末尾加?的表现。
• 计算水量的按钮没有触发该问题，是因为该按钮不在<form>标签包裹范围内，所以不会触发表单提交。

解决方案 #

任选其一即可：

方案1：显式指定按钮类型 #

给BMI计算的按钮添加type="button"属性，明确按钮为普通点击按钮，不会触发表单提交：

<button type="button" value="calculate" onclick="calculateBMI()">Calculate</button>

方案2：阻止点击事件的默认行为 #

修改绑定逻辑和JS函数，阻止提交默认行为：

1. 绑定事件时传入event对象：

<button value="calculate" onclick="calculateBMI(event)">Calculate</button>

2. 函数开头添加阻止默认事件逻辑：

function calculateBMI(e){
    e.preventDefault();
    // 原有逻辑保持不变
    let height = document.getElementById("bmiHeight").value;
    let weight = document.getElementById("bmiWeight").value;
    let bmi = parseFloat(weight) / (parseFloat(height) * parseFloat(height));
    let result = document.getElementById("bmiResult");
    result.innerText = "Your BMI is:" + bmi;
}

方案3：禁用表单的默认提交行为 #

如果该表单本身没有服务端提交的需求，可以直接给表单标签添加阻止提交的配置：

<form onsubmit="return false;">
<!-- 表单内原有内容保持不变 -->
</form>

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