JavaScript嵌套Switch语句多变量实现延误赔偿计算器故障排查

核心问题清单 #

• 函数名不匹配：HTML按钮的onclick调用calculateTotalComp()，但JS中定义的计算函数是calculateComp()，导致点击按钮无响应。
• 无意义的函数调用：dropdownChange()没有返回值，var ticket = dropdownChange()会得到undefined，完全没必要单独写这个函数，直接在计算逻辑里获取票种值即可。
• 变量未声明：totalComp未用var/let/const声明，会隐式创建全局变量，存在污染全局作用域的风险。
• 类型转换问题：从input获取的price和delay是字符串类型，直接参与计算可能引发异常（比如空值或非数字输入），需要显式转为数字。
• 未覆盖的票种：HTML里包含season季票选项，但JS的switch逻辑没有对应的处理分支，会导致totalComp未定义，页面输出£undefined。
• HTML标签未闭合：<fieldset>、<form>、<p>等标签未闭合，可能导致页面渲染异常。
• 冗余逻辑：单程票的delay <=119和delay >=120分支返回结果一致，可合并简化。

修正后的完整代码 #

JavaScript代码

function calculateComp() {
    // 获取输入值并转为数字，空值或非数字时默认设为0
    const price = Number(document.getElementById("ticketprice").value) || 0;
    const delay = Number(document.getElementById("delay").value) || 0;
    const ticket = document.getElementById("ticket").value;
    let totalComp = 0; // 初始化默认赔偿金额

    switch (ticket) {
        case "single":
            if (delay <= 29) {
                totalComp = 0;
            } else if (delay <= 59) {
                totalComp = price * 0.5;
            } else {
                totalComp = price;
            }
            break;
        case "return":
            if (delay <= 29) {
                totalComp = 0;
            } else if (delay <= 59) {
                totalComp = price * 0.25;
            } else if (delay <= 119) {
                totalComp = price * 0.5;
            } else {
                totalComp = price;
            }
            break;
        case "season":
            // 这里补充季票的赔偿规则，示例默认设为0，可按需修改
            totalComp = 0;
            break;
        default:
            totalComp = 0;
    }

    // 格式化金额为两位小数，符合货币展示规范
    document.getElementById("repay").innerHTML = "£" + totalComp.toFixed(2);
}

HTML代码

<form action="" id="compform" onsubmit="return false;">
    <fieldset>
        <h2>Compensation Calculator</h2>
        <p>
            <label>Ticket Price</label>
            <input type="number" id="ticketprice" name="ticketprice" min="0" step="0.01" />
        </p>
        
        <p>
            <label>Delay Time (minutes)</label>
            <input type="number" id="delay" name="delayTime" value="" min="0" />
        </p>
        
        <label>Ticket Type</label>
        <select id="ticket" name='ticket'>
            <option value="single">Single</option>
            <option value="return">Return</option>
            <option value="season">Season</option>
        </select>
        
        <p>
            <button class="submit" onclick="calculateComp();">Go!</button>
        </p>

        <div id="repay"></div>
    </fieldset>
</form>

额外优化说明 #

• 移除了无用的dropdownChange()函数，直接在计算时获取票种值，简化逻辑。
• 给input添加min和step属性，限制输入范围，提升用户输入体验。
• 使用toFixed(2)格式化金额，确保显示两位小数，避免出现多位小数的不规范展示。
• 给totalComp设置默认值，避免未处理的分支导致输出异常。

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