基于HTML <select>的JS switch问题：计算器始终执行default分支

问题根源 #

你的代码中switch语句的每个case分支都缺少break关键字，导致程序匹配到对应case后不会终止执行，会继续运行后续所有分支，最终走到default分支——这就是无论选择哪种运算类型都触发默认逻辑的核心原因。

另外可以简化选中值的获取方式：直接通过select元素的value属性就能拿到选中的option值，无需通过options[selectedIndex].value的复杂写法。

修改后的JavaScript代码 #

function clickHandler() {
    // 提前转为浮点数，避免字符串运算错误
    let num1 = parseFloat(document.getElementById("firstNum").value);
    let num2 = parseFloat(document.getElementById("secondNum").value);
    // 简化选中值获取逻辑
    let selectedType = document.getElementById("calcType").value;

    let add = `Addition: ${num1} + ${num2} = ${num1 + num2}`;
    let subtract = `Subtraction: ${num1} - ${num2} = ${num1 - num2}`;
    let multiply = `Multiplication: ${num1} * ${num2} = ${num1 * num2}`;
    let divide = `Division: ${num1} / ${num2} = ${(num1 / num2).toFixed(3)}`;
    let remainder = `Remainder: ${num1} % ${num2} = ${num1 % num2}`;

    switch(selectedType) {
        case "add": 
            document.getElementById("results").innerHTML = `<p>${add}</p>`;
            break; // 添加break终止当前分支
        case "subtract": 
            document.getElementById("results").innerHTML = `<p>${subtract}</p>`;
            break;
        case "multiply": 
            document.getElementById("results").innerHTML = `<p>${multiply}</p>`;
            break;
        case "divide": 
            document.getElementById("results").innerHTML = `<p>${divide}</p>`;
            break;
        case "modulo": 
            document.getElementById("results").innerHTML = `<p>${remainder}</p>`;
            break;
        default: 
            document.getElementById("results").innerHTML = `<p>请选择有效的运算类型</p>`;
    }
}

额外优化说明 #

• 提前将输入的字符串转为浮点数，避免出现"2"+"3"得到"23"这类字符串拼接错误。
• 补全所有变量声明后的分号，保证语法规范。
• 修改default分支的提示内容，更贴合异常场景。

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