如何使用JavaScript编写计算公式并通过HTML展示公式与计算结果

AI 小北

2026-10-5

力计算公式前端展示实现方案

原有代码存在的问题

document.getElementById() 方法的入参为字符串类型，需要给目标ID值包裹英文引号，同时你原有代码拼写错误，把getElementById写为getElmentById，缺少字母e
输入框的值需要手动获取value属性并转为数值类型，否则直接计算会出现字符串拼接错误
onclick事件绑定语法错误，同时不需要在HTML的button标签上重复声明onclick="equals"，避免逻辑冲突
计算结果需要写入到结果输出节点forceResult的内容中，而非直接操作未挂载到DOM的force变量

修复后的完整可运行代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>力计算工具</title>
</head>
<body>
    <h1> 
        Force = 
        <input type="number" id="pressure" value=""/> x <br/>
        <input type="number" id="area" value=""/>
        <button id="equals">=</button>
        <output type="number" id="forceResult"></output> 
    </h1>

    <script>
        // 获取DOM元素
        const pressureInput = document.getElementById('pressure');
        const areaInput = document.getElementById('area');
        const equalsBtn = document.getElementById('equals');
        const forceResult = document.getElementById('forceResult');

        // 计算逻辑
        function calculateForce(pressure, area) {
            return pressure * area;
        }

        // 绑定点击事件
        equalsBtn.onclick = () => {
            // 获取输入值转数字
            const pressure = Number(pressureInput.value);
            const area = Number(areaInput.value);
            // 计算并展示结果
            const force = calculateForce(pressure, area);
            forceResult.textContent = force;
        }
    </script>
</body>
</html>