制作简易计算器遇问题：仅支持+运算，#dot按钮失效求解决

我正在制作一款带多按钮的简易计算器，但目前仅支持+运算，且#dot按钮无法正常工作，求解决思路。

用户提供的代码：

var input='', acc=0, operation='';

function btn(x){ 
    switch(x){  
        case '=':{
            if (operation=='+'){
                input=acc+Number(input);
            }else
            if (operation=='*'){
                input=acc*Number(input);
            };
            document.querySelector('#dot').disabled=false;
            break;
        }  

        case '*':{
            acc=Number(input);
                operation='*';
        };      
        case '+':{
            acc=Number(input);
                operation='+';
        }; 
        case 'c': 
            input='';
            document.querySelector('#dot').disabled=false;
        break;
        case '_':
            document.querySelector('#dot').disabled=true; 
        default:
            input+=String(x);
    };
    document.querySelector('.display').innerText=input;
    
} 

问题分析与修复方案 #

1. 仅支持加法运算的原因 #

你的switch语句里，case '*'和case '+'代码块末尾没有加break;，导致点击*按钮时，代码会继续往下执行case '+'的逻辑，最终operation被强制设为+，自然只有加法能生效。

修复： 给case '*'和case '+'的代码块末尾加上break;，确保每个case执行完就跳出switch，不会串到下一个case。

2. 小数点按钮（#dot）失效问题 #

原代码里的case '_'逻辑完全错误，应该是处理小数点输入，而不是直接禁用按钮；另外也没做重复输入小数点的限制，切换运算时也没重置小数点状态。

修复点：

• 把case '_'改成case '.'（假设你的小数点按钮点击时传的参数是.，原代码的_应该是笔误）；
• 添加判断：如果当前输入框里已经有小数点，就不再重复添加；
• 点击小数点后禁用按钮，避免重复输入；
• 在切换运算（+/*）和清除（c）、等于（=）操作时，恢复小数点按钮的可用状态；
• 切换运算时重置input，方便输入下一个数字。

修复后的完整代码 #

var input = '', acc = 0, operation = '';

function btn(x) {
    switch(x) {  
        case '=':
            if (operation === '+') {
                input = acc + Number(input);
            } else if (operation === '*') {
                input = acc * Number(input);
            }
            document.querySelector('#dot').disabled = false;
            break;

        case '*':
            acc = Number(input);
            operation = '*';
            input = '';
            document.querySelector('#dot').disabled = false;
            break;      
        case '+':
            acc = Number(input);
            operation = '+';
            input = '';
            document.querySelector('#dot').disabled = false;
            break; 
        case 'c': 
            input = '';
            acc = 0;
            operation = '';
            document.querySelector('#dot').disabled = false;
            break;
        case '.':
            // 避免重复添加小数点，为空时自动补0
            if (!input.includes('.')) {
                input = input === '' ? '0.' : input + '.';
                document.querySelector('#dot').disabled = true;
            }
            break;
        default:
            input += String(x);
    }
    document.querySelector('.display').innerText = input;
}

额外优化建议 #

• 可以添加减法、除法运算，逻辑和加法乘法一致；
• 处理运算结果为超长小数的情况，比如保留两位小数；
• 添加负数输入功能，比如点击正负号按钮切换数字正负。

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