HTML+PyScript梯形面积计算表单结果不显示的修复方法

问题根源 #

原代码存在三个核心问题导致无输出：

• 读取用户输入的数值后，立刻将w1、w2、h重置为0.0，导致后续的w1>0 and w2>0 and h>0条件永远不满足，无法执行结果写入逻辑。
• 梯形面积计算公式错误，正确公式应为(上底 + 下底) × 高 ÷ 2，原代码的1/2*h*w1+w2运算顺序错误，结果完全不符合预期。
• 代码缩进混乱，注释的#except:无实际作用且破坏逻辑结构。

修复后的完整代码 #

<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <title>Trapezoidal Area Calculator</title>
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
    <form onsubmit="return false">
        <label for="w1">上底长度:</label><br>
        <input type="number" step="any" id="w1" name="w1" required><br>    
        <label for="w2">下底长度:</label><br>
        <input type="number" step="any" id="w2" name="w2" required><br>   
        <label for="h">高度:</label><br>
        <input type="number" step="any" id="h" name="h" required><br>   
        <input pys-onClick="calculate_trapezoid_area" type="submit" id="btn-form" value="计算面积">
    </form>

    <p id='output'></p>

<py-script>
def calculate_trapezoid_area(*args, **kwargs):
    try:
        # 获取用户输入的数值
        w1 = float(Element('w1').value)
        w2 = float(Element('w2').value)
        h = float(Element('h').value)
        result_place = Element('output')
        
        # 验证数值有效性
        if w1 > 0 and w2 > 0 and h > 0:
            # 正确的梯形面积计算公式
            area = 0.5 * h * (w1 + w2)
            result_place.write(f"梯形面积为: {area:.2f}")
        else:
            result_place.write("请输入大于0的有效数值")
    except ValueError:
        result_place.write("请输入有效的数字")
</py-script>   
</body>
</html>

修复说明 #

• 移除了错误的数值重置代码，保留用户输入的真实值用于计算。
• 修正了梯形面积计算公式，确保运算逻辑正确。
• 添加了try-except异常处理，捕获非数字输入的错误，提升用户体验。
• 优化了表单提示文字，增加required属性确保输入完整性。
• 重命名函数为更具语义的calculate_trapezoid_area，提高代码可读性。

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