javascripthtmlfunctionswitch-statementlet

Why will this switch statement only work with a single case?


Why will this switch statement not work? It will only work when I remove all but one (any) of the cases. It seems to get the values correctly and match them up to the correct case but when there is more than one case for it to select from it doesn't do anything.

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;
        }
}
<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>


Solution

  • You are not allowed to declare a "let variable" multiple times inside of one function. I fixed that and shortened your code a little bit:

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