如何根据用户选择的求解变量切换加速度计算器的输入框？

先给你修正并完善后的代码，解决了原代码里的问题，同时实现了完整的计算功能：

<!DOCTYPE html>
<html>
<body>
   <h1>加速度计算器</h1>

    <form>
        <label for="variableCal">选择要求解的变量:</label>
        <select id="variableCal" onchange="showInputs()">
            <option value="v">末速度 v</option>
            <option value="u">初速度 u</option>
            <option value="t">时间 t</option>
            <option value="a">加速度 a</option>
        </select>
        <br>
        
        <div id="u-group" style="display: none; margin: 8px 0;">
            <label for="u">初速度 u (m/s):</label>
            <input type="number" id="u" step="any" required>
        </div>
        
        <div id="v-group" style="display: none; margin: 8px 0;">
            <label for="v">末速度 v (m/s):</label>
            <input type="number" id="v" step="any" required>
        </div>
        
        <div id="a-group" style="display: none; margin: 8px 0;">
            <label for="a">加速度 a (m/s²):</label>
            <input type="number" id="a" step="any" required>
        </div>
        
        <div id="t-group" style="display: none; margin: 8px 0;">
            <label for="t">时间 t (s):</label>
            <input type="number" id="t" step="any" required>
        </div>
   
        <br>
        <button type="button" onclick="solveEquation()">计算</button>
    </form>
    <div id="resultCal" style="margin-top: 16px; font-size: 1.2em;"></div>

    <script>
        function showInputs() {
            const variable = document.getElementById("variableCal").value;
            // 先隐藏所有输入组
            document.getElementById("u-group").style.display = "none";
            document.getElementById("v-group").style.display = "none";
            document.getElementById("a-group").style.display = "none";
            document.getElementById("t-group").style.display = "none";
            
            // 根据选择显示需要的输入框
            switch(variable) {
                case "v":
                    document.getElementById("u-group").style.display = "block";
                    document.getElementById("a-group").style.display = "block";
                    document.getElementById("t-group").style.display = "block";
                    break;
                case "u":
                    document.getElementById("v-group").style.display = "block";
                    document.getElementById("a-group").style.display = "block";
                    document.getElementById("t-group").style.display = "block";
                    break;
                case "t":
                    document.getElementById("v-group").style.display = "block";
                    document.getElementById("u-group").style.display = "block";
                    document.getElementById("a-group").style.display = "block";
                    break;
                case "a":
                    document.getElementById("v-group").style.display = "block";
                    document.getElementById("u-group").style.display = "block";
                    document.getElementById("t-group").style.display = "block";
                    break;
            }
            // 清空之前的结果
            document.getElementById("resultCal").textContent = "";
        }

        function solveEquation() {
            const variable = document.getElementById("variableCal").value;
            let result;
            // 获取输入值并转为数字
            const u = parseFloat(document.getElementById("u").value);
            const v = parseFloat(document.getElementById("v").value);
            const a = parseFloat(document.getElementById("a").value);
            const t = parseFloat(document.getElementById("t").value);
            
            // 验证输入是否有效
            const checkValid = (...values) => values.every(val => !isNaN(val));
            
            switch(variable) {
                case "v":
                    if(checkValid(u, a, t)) {
                        result = u + a * t;
                        document.getElementById("resultCal").textContent = `末速度 v = ${result.toFixed(2)} m/s`;
                    } else {
                        document.getElementById("resultCal").textContent = "请输入有效的数值！";
                    }
                    break;
                case "u":
                    if(checkValid(v, a, t)) {
                        result = v - a * t;
                        document.getElementById("resultCal").textContent = `初速度 u = ${result.toFixed(2)} m/s`;
                    } else {
                        document.getElementById("resultCal").textContent = "请输入有效的数值！";
                    }
                    break;
                case "t":
                    if(checkValid(v, u, a) && a !== 0) {
                        result = (v - u) / a;
                        document.getElementById("resultCal").textContent = `时间 t = ${result.toFixed(2)} s`;
                    } else if(a === 0) {
                        document.getElementById("resultCal").textContent = "加速度不能为零！";
                    } else {
                        document.getElementById("resultCal").textContent = "请输入有效的数值！";
                    }
                    break;
                case "a":
                    if(checkValid(v, u, t) && t !== 0) {
                        result = (v - u) / t;
                        document.getElementById("resultCal").textContent = `加速度 a = ${result.toFixed(2)} m/s²`;
                    } else if(t === 0) {
                        document.getElementById("resultCal").textContent = "时间不能为零！";
                    } else {
                        document.getElementById("resultCal").textContent = "请输入有效的数值！";
                    }
                    break;
            }
        }

        // 页面加载时默认显示求解v的输入框
        window.onload = showInputs;
    </script>
</body>
</html>

主要修正和优化点： #

1. 修复下拉选项错误：原代码中求解"a"的选项值写成了"t"，现在改成正确的value="a"。
2. 分组管理输入框：把每个变量的标签和输入框放在同一个<div>里，切换时可以一次性显示/隐藏整个组，代码更简洁。
3. 逻辑优化：showInputs函数先隐藏所有输入组，再根据选择显示需要的三个输入框（不需要显示被求解的变量输入）。
4. 实现计算功能：新增solveEquation函数，根据公式变形计算结果：
   • 末速度：v = u + a*t
   • 初速度：u = v - a*t
   • 时间：t = (v - u)/a（需判断加速度不为零）
   • 加速度：a = (v - u)/t（需判断时间不为零）
5. 输入验证：检查输入是否为有效数字，避免计算错误；处理除以零的异常情况。
6. 用户体验优化：页面加载时默认显示第一个选项的输入框；计算结果保留两位小数，显示单位；每次切换变量时清空之前的结果。

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