如何基于按钮value属性值编写switch函数实现计算器运算功能

你的代码存在以下几处核心错误： #

• input输入框的取值方式错误，表单元素需要用.value属性取值/赋值，而非.innerHTML，且你在全局提前读取的是页面加载时的初始空值，点击按钮时无法获取用户最新输入
• document.querySelectorAll('value')是无效选择器，不存在<value>标签，你需要获取的是当前点击按钮的value属性，要在调用Calculate时传入当前按钮元素this
• switch的判断条件不是当前点击按钮的value，导致分支完全无法匹配
• 输入框获取的值是字符串类型，直接执行+会变成字符串拼接而非算术加法，需要先转为数字类型
• 清空逻辑运算符使用错误，&是位运算符，==是比较运算符，你需要的是给三个输入框的value赋值为空
• 计算结果仅输出在控制台，没有赋值给结果输入框，页面无法显示计算结果

修改后可正常运行的代码： #

HTML部分（仅修改按钮的onclick属性，传入当前按钮元素）

<form action="">
    <label for="firstVal">numberA</label><br>
    <input type="number" name="firstVal" id="firstVal"><br>
    <label for="SecondVal">numberB</label><br>
    <input type="number" name="SecondVal" id="SecondVal"><br>
    <label for="Result">Result</label><br>
    <input type="number" name="Result" id="Result" readonly><br>
    <br><br>
    <input type="button" value="+" onclick="Calculate(this)">
    <input type="button" value="-" onclick="Calculate(this)">
    <input type="button" value="x" onclick="Calculate(this)">
    <input type="button" value="/" onclick="Calculate(this)">
    <input type="button" value="C" onclick="Calculate(this)">
</form>

JavaScript部分

// 提前缓存DOM元素，不要提前读取输入值
const firstInput = document.getElementById("firstVal");
const secondInput = document.getElementById("SecondVal");
const resultInput = document.getElementById("Result");

function Calculate(btn) {
    const operator = btn.value;
    let sol;

    // 处理清空逻辑
    if (operator === 'C') {
        firstInput.value = '';
        secondInput.value = '';
        resultInput.value = '';
        return;
    }

    // 读取最新输入值并转为数字
    const firstNum = Number(firstInput.value);
    const secondNum = Number(secondInput.value);

    // 输入合法性校验，不需要可直接删除
    if (isNaN(firstNum) || isNaN(secondNum)) {
        alert('请输入有效的数字');
        return;
    }

    // 按运算符执行计算
    switch (operator) {
        case "+":
            sol = firstNum + secondNum;
            break;
        case "-":
            sol = firstNum - secondNum;
            break;
        case "x":
            sol = firstNum * secondNum;
            break;
        case "/":
            if (secondNum === 0) {
                alert('除数不能为0');
                return;
            }
            sol = firstNum / secondNum;
            break;
    }

    // 赋值结果到页面
    resultInput.value = sol;
}

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