JS/HTML栈式计算器无法拼接多位数问题求助

问题根源 #

你的计算器无法输入多位数的核心问题在于：

• 所有数字按钮的onclick绑定的是display()函数，但该函数处理数字输入时，直接执行displayVal = val，每次点击都会覆盖原有值，而非拼接字符串。
• 你编写的displayNum函数从未被实际调用，因此之前针对该函数的修改没有产生效果。

修复方案 #

修改display函数中处理数字和小数点的逻辑，替换直接赋值为字符串拼接逻辑，同时处理初始值为0、小数点重复输入的边界情况：

//declare stack:
let stack = [];
//initialize displayval to 0
let displayVal = '0';
let decimalFlag = false;

const input = document.getElementById('result');

//Clears the display and sets to 0:
function clearScreen() {
  document.getElementById('result').value = '0';
  stack = [];
  displayVal = '0';
  decimalFlag = false;
}

// displays results after operations:
function display(val) {
  //setting display to 0 :
  if (val === 'Push') {
    stack.push(displayVal);
    decimalFlag = false;
  }
  //else operations:
  else if (val === '+' || val === '-' || val === '*' || val === '/') {
    //popping nums off stack:
    let num2 = stack.pop();
    let num1 = stack.pop();

    let result;
    //converts strings to numbers to operate on them:
    if (val === '+') {
      result = Number(num1) + Number(num2);
    } else if (val === '-') {
      result = Number(num1) - Number(num2);
    } else if (val === '*') {
      result = Number(num1) * Number(num2);
    } else if (val === '/') {
      result = Number(num1) / Number(num2);
    }

    //push result to stack and display
    stack.push(result.toString()); // 转成字符串避免后续数字拼接时出现类型问题
    displayVal = result.toString();
    decimalFlag = false;
  }

  //negates a number:
  else if (val === '+/-') {
    displayVal = displayVal[0] === '-' ? displayVal.slice(1) : '-' + displayVal;
  }

  //处理小数点输入
  else if (val === '.') {
    if (!decimalFlag) {
      displayVal += '.';
      decimalFlag = true;
    }
  }

  //处理数字输入
  else {
    // 如果当前显示是0，替换为新数字；否则拼接
    displayVal = displayVal === '0' ? val : displayVal + val;
  }

  document.getElementById('result').value = displayVal;
}

关键修改说明 #

1. 数字输入逻辑：将原有的displayVal = val替换为displayVal = displayVal === '0' ? val : displayVal + val，实现初始值替换、后续值拼接的效果。
2. 小数点处理：新增小数点分支逻辑，通过decimalFlag避免重复输入小数点。
3. 运算结果处理：将运算结果转为字符串后存入stack和displayVal，避免后续数字拼接时出现数字与字符串相加的类型错误。
4. 移除无用函数：删除未被调用的displayNum函数，简化代码。

测试验证 #

修改后执行以下操作：

• 按下5→6，输出框显示56
• 点击Push→输入78→点击Push→点击*，输出框显示4368（56*78的结果）
• 点击C，输出框重置为0，栈清空

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