自制JavaScript计算器无法计算仅拼接数字的问题求助

问题根源 #

控制台无报错但计算功能失效、数字仅拼接，核心是以下逻辑错误：

1. 按钮事件绑定错误，未触发数字/符号判断逻辑
2. 未存储选中的运算符，导致等号触发时无计算依据
3. 运算符处理函数逻辑混乱，未执行累计计算
4. 遗漏加号运算符的分支处理

修复方案 #

1. 修正事件绑定：将init函数中按钮点击事件的handleButtonClick改为buttonClick，确保先执行数字/符号判断
2. 存储运算符：在handleMath函数中为previousOperator赋值当前点击的符号，作为后续计算的依据
3. 修正累计计算逻辑：handleMath的else分支调用mathOperator(intBuffer)而非handleButtonClick，执行累计运算
4. 添加加号分支：在handleButtonClick的switch中加入case '+'，指向handleMath处理
5. 修正函数调用：移除handleMath中错误的mathOperator(symbol)调用，该函数参数应为数字而非符号
6. 处理按钮文本空格：对按钮文本执行trim()，避免空格导致数字拼接异常

修复后的完整代码 #

JavaScript

let buffer = '0';
let runningTotal = 0;
let previousOperator;

const screen = document.querySelector('.screen');
const all_buttons = document.querySelectorAll('.calc_btns .calc_btn');

function buttonClick(value) {
    if (isNaN(value)) {
        handleButtonClick(value);
    } else {
        handleNumber(value);
    }
    updateScreen();
}

function handleButtonClick(symbol) {
    switch (symbol) {
        case 'A':
            clearBuffer();
            break;
        case '=':
            if (previousOperator == null) {
                return;
            }
            mathOperator(parseFloat(buffer));
            buffer = runningTotal.toString();
            runningTotal = 0;
            previousOperator = null;
            break;
        case '+':
        case '%':
        case '-':
        case '÷':
        case '×':
            handleMath(symbol);
            break;
        default:
            handleNumber(symbol);
            break;
    }
    updateScreen();
}

function init() {
    for (let i = 0; i < all_buttons.length; i++) {
        let button = all_buttons[i];
        button.addEventListener('click', function () {
            buttonClick(this.textContent.trim());
            console.log('button clicked');
        })
    }
}
init();

function handleMath(symbol) {
    if (buffer == '0') {
        return;
    }

    const intBuffer = parseFloat(buffer);

    if (runningTotal == 0) {
        runningTotal = intBuffer;
    } else {
        mathOperator(intBuffer);
    }
    previousOperator = symbol;
    buffer = '0';
}

function mathOperator(intBuffer) {
    if (previousOperator == '+') {
        runningTotal += intBuffer;
    } else if (previousOperator == '-') {
        runningTotal -= intBuffer;
    } else if (previousOperator == '%') {
        runningTotal %= intBuffer;
    } else if (previousOperator == '÷') {
        runningTotal /= intBuffer;
    } else if (previousOperator == '×') {
        runningTotal *= intBuffer;
    }
}

function handleNumber(numberString) {
    numberString = numberString.trim();
    if (buffer == '0') {
        buffer = numberString;
    } else {
        buffer += numberString;
    }
}

function clearBuffer() {
    buffer = '0';
    runningTotal = 0;
    previousOperator = undefined;
}

function updateScreen() {
    screen.textContent = buffer;
}

CSS

body {
  background-color: grey;
}

.container {
  margin: 100px auto 0;
  border: 3px solid;
  border-radius: 15px;
  padding: 25px 30px;
  width: 240px;
  height: 360px;
  font-size: 40px;
  font-family: "Ubuntu", sans-serif;
  background-color: black;
  color: white;
  border-color: black;
  box-shadow: 15px 15px 20px black;
}

.calc_btn {
  border-radius: 50px;
  border: 1px solid;
  font-family: "Ubuntu", sans-serif;
  font-size: 30px;
  padding: 5px 9px;
  width: 50px;
  height: 50px;
  background-color: rgb(71, 69, 69);
  color: white;
  border-color: rgb(71, 69, 69);
  display: inline;
}

.calc_btn:hover {
  background-color: grey;
}

.calc_btn:last-child {
  background-color: orange;
}

.calc_btn:last-child:hover {
  background-color: rgb(235, 179, 76);
}

.screen {
  text-align: right;
  padding: 5px;
  font-family: inherit;
  font-size: 45px;
  border: 1px solid;
  border-radius: 15px;
}

.calc_btn_row {
  display: flex;
  justify-content: space-between;
  margin: 5% 0;
}

HTML

<div class="container">
  <section class="screen">
    0
  </section>

  <section class="calc_btns">
    <div class="calc_btn_row">
      <button class="calc_btn">
        A
      </button>
      <button class="calc_btn">
        /-
      </button>
      <button class="calc_btn">
        %
      </button>
      <button class="calc_btn">
        ÷
      </button>
    </div>
    <div class="calc_btn_row">
      <button class="calc_btn">
        7
      </button>
      <button class="calc_btn">
        8
      </button>
      <button class="calc_btn">
        9
      </button>
      <button class="calc_btn">
        ×
      </button>
    </div>
    <div class="calc_btn_row">
      <button class="calc_btn">
        4
      </button>
      <button class="calc_btn">
        5
      </button>
      <button class="calc_btn">
        6
      </button>
      <button class="calc_btn">
        -
      </button>
    </div>
    <div class="calc_btn_row">
      <button class="calc_btn">
        1
      </button>
      <button class="calc_btn">
        2
      </button>
      <button class="calc_btn">
        3
      </button>
      <button class="calc_btn">
        +
      </button>
    </div>
    <div class="calc_btn_row">
      <button id="num0" class="calc_btn">
        0
      </button>
      <button class="calc_btn">
        ,
      </button>
      <button class="calc_btn">
        =
      </button>
    </div>
  </section>
</div>

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