求助完成HTML表单的JavaScript速度计算功能：公式求解实现

看起来你在实现跑步速度计算表单时遇到了几个常见的JS问题，我帮你梳理并修复一下：

原代码的核心问题 #

• 公式错误：你给出的公式是 MPH=(15f/22t)，但代码里写的是 (45 * feet) / (22 * time)——多乘了3倍，这会导致计算结果完全不对。
• 输入值未转换类型：表单输入的value默认是字符串类型，直接用字符串做数学运算会出现NaN或者错误结果。
• 使用document.write不当：这个方法会清空当前页面所有内容重新写入，而不是把结果放到你预留的<span id="result"></span>里，直接破坏了页面结构。

修正后的完整代码 #

JavaScript部分

function calculateMph() { 
    // 获取输入值并转换为浮点数，确保数值运算正常
    var feet = parseFloat(document.getElementById("inputFeet").value); 
    var time = parseFloat(document.getElementById("inputSeconds").value); 

    // 输入验证：避免无效值和除以0错误
    if (isNaN(feet) || isNaN(time) || time <= 0) {
        document.getElementById("result").textContent = "请输入有效的数字，且时间不能为0！";
        return;
    }

    // 使用正确的公式计算MPH
    var mph = (15 * feet) / (22 * time); 

    // 将结果保留两位小数，显示到指定位置
    document.getElementById("result").textContent = mph.toFixed(2); 
}

可选的HTML优化（提升用户体验）

把输入框的type改成number并添加最小限制，让浏览器帮你拦截无效输入：

<form id="form"> 
    Distance in Feet(f):<input id="inputFeet" type="number" name="feet" required min="1"><br> 
    Number of Seconds(t):<input id="inputSeconds" type="number" name="seconds" required min="0.1"><br><br> 
    <input type="button" onclick="calculateMph()" value="Calculate" /> 
</form> 

关键修改说明 #

• 类型转换：用parseFloat()把字符串转成数字，确保数学运算正常进行。
• 输入验证：检查输入是否为有效数字，同时避免时间为0导致的除以0错误，给用户清晰的提示。
• 正确公式：修正为题目要求的15f/22t。
• 结果展示：通过修改#result的textContent来显示结果，完美契合你预留的页面位置，不会破坏原有布局。

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