为何该JavaScript switch语句仅保留单个case时才可正常运行？

你的代码无法正常运行的核心原因是重复使用let声明同名变量result：switch语句的所有case共享同一个块作用域，每个case里的let result相当于在同一个作用域内多次声明同一变量，这会触发语法错误，导致整个Calculate函数无法执行。仅保留单个case时，只存在一次变量声明，所以不会报错。

修复方法一：将变量声明移到switch外部 #

把result的声明提到switch语句之前，在每个case中只做赋值操作：

function Calculate() {
    let result;
    switch (document.getElementById("operator").value) {
        case "+":
            result = +document.getElementById("v1").value + +document.getElementById("v2").value;
            document.getElementById("r").value = result;
            break;
        case "-":
            result = +document.getElementById("v1").value - +document.getElementById("v2").value;
            document.getElementById("r").value = result;
            break;
        case "*":
            result = +document.getElementById("v1").value * +document.getElementById("v2").value;
            document.getElementById("r").value = result;
            break;
        case "/":
            result = +document.getElementById("v1").value / +document.getElementById("v2").value;
            document.getElementById("r").value = result;
            break;
        case "^":
            result = Math.pow(+document.getElementById("v1").value, +document.getElementById("v2").value);
            document.getElementById("r").value = result;
            break;
    }
}

修复方法二：给每个case添加独立块作用域 #

给每个case的代码包裹大括号，让每个let result处于独立的块作用域中：

function Calculate() {
    switch (document.getElementById("operator").value) {
        case "+": {
            let result = +document.getElementById("v1").value + +document.getElementById("v2").value;
            document.getElementById("r").value = result;
            break;
        }
        case "-": {
            let result = +document.getElementById("v1").value - +document.getElementById("v2").value;
            document.getElementById("r").value = result;
            break;
        }
        case "*": {
            let result = +document.getElementById("v1").value * +document.getElementById("v2").value;
            document.getElementById("r").value = result;
            break;
        }
        case "/": {
            let result = +document.getElementById("v1").value / +document.getElementById("v2").value;
            document.getElementById("r").value = result;
            break;
        }
        case "^": {
            let result = Math.pow(+document.getElementById("v1").value, +document.getElementById("v2").value);
            document.getElementById("r").value = result;
            break;
        }
    }
}

另外注意你原代码中减法的写法+document.getElementById("v1").value + -document.getElementById("v2").value，可以简化为+document.getElementById("v1").value - +document.getElementById("v2").value，逻辑更清晰。

HTML部分无需修改，可直接保留：

<form>
    <input type="number" id="v1" name="value1">
    <br>
    <input type="number" id="v2" name="value2">
    <br>
    <input type="button" onclick="Calculate()" value="Click to calculate">
    <br>
    <input type="number" id="r" name="result">
</form>

<select name="operators" id="operator">
    <option value="+">+</option>
    <option value="-">-</option>
    <option value="*">*</option>
    <option value="/">/</option>
    <option value="^">^</option>
</select>

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