JS网页计算器未按等号时平方根仅计算表达式首数字问题

网页计算器平方根功能存在逻辑异常：

• 输入单个数字时开方计算正常
• 未按等号求值的完整算式（如9+6）点击开方时，不会先计算算式整体结果再开方，只会提取算式第一个数字开方，例如输入9+6点开方返回3（√9的结果），而非预期的√15≈3.873
• 代码同时存在其他隐性bug：平方根按钮绑定函数名不匹配、正负切换函数名拼写错误、其余一元运算（平方、百分比、阶乘等）存在同类开方逻辑问题、Ans按钮绑定的函数未定义。

squareRoot函数直接使用parseFloat()解析输入框的原始字符串，parseFloat()解析到第一个非数字字符（+、-、*、/等运算符）就会终止，因此只能拿到表达式开头的第一个数字，无法识别完整算式。

1. 统一修正所有一元运算函数的取值逻辑 #

所有对当前表达式结果做二次运算的功能，都需要先用eval()计算完整表达式的结果，再执行对应数学运算，禁止直接用parseFloat()解析未求值的原始表达式。

修复后的平方根函数 #

function squareRoot() {
  const resArea = document.getElementById('resultArea');
  const exprVal = eval(resArea.innerHTML);
  // 处理负数开方的异常场景
  if (exprVal < 0) {
    resArea.innerHTML = "无效输入";
    return;
  }
  resArea.innerHTML = Math.sqrt(exprVal);
}

其余同类函数同步修复 #

• 平方函数

function squared() {
  const resArea = document.getElementById('resultArea');
  const exprVal = eval(resArea.innerHTML);
  resArea.innerHTML = Math.pow(exprVal, 2);
}

• 正负号切换函数（修正原函数名拼写错误，原函数名changingPresing少写了g，和HTML绑定的changingPresign不匹配）

function changingPresign() {
  const resArea = document.getElementById('resultArea');
  const exprVal = eval(resArea.innerHTML);
  resArea.innerHTML = exprVal * -1;
}

• 百分比函数

function Percent() {
  const resArea = document.getElementById('resultArea');
  const exprVal = eval(resArea.innerHTML);
  resArea.innerHTML = exprVal / 100;
}

• 阶乘函数

function faculty() {
  const resArea = document.getElementById('resultArea');
  const input = eval(resArea.innerHTML);
  // 处理非整数、负数阶乘的异常场景
  if (input < 0 || !Number.isInteger(input)) {
    resArea.innerHTML = "无效输入";
    return;
  }
  let result = 1;
  for (let i = 2; i <= input; i++) {
    result *= i;
  }
  resArea.innerHTML = result;
}

• 任意次幂函数

function anyExponent() {
  const resArea = document.getElementById('resultArea');
  const baseVal = eval(resArea.innerHTML);
  const exponent = Number(prompt("请输入指数"));
  if (isNaN(exponent)) return;
  resArea.innerHTML = Math.pow(baseVal, exponent);
}

• e的幂函数

function eulerscheZahl() {
  const resArea = document.getElementById('resultArea');
  const exprVal = eval(resArea.innerHTML);
  resArea.innerHTML = Math.exp(exprVal);
}

• 补全Ans功能（新增全局变量存储上一次计算结果）

// 脚本最外层新增全局变量
let lastAnswer = 0;

// 修改原有等号计算函数，计算完成后存储结果
function calculateResult() {
  const container = document.getElementById('resultArea');
  const result = eval(container.innerHTML);
  lastAnswer = result;
  container.innerHTML = result;
};

// 新增Ans函数
function Ans() {
  document.getElementById('resultArea').innerHTML += lastAnswer;
}

2. 修正HTML按钮绑定错误 #

将平方根按钮的绑定函数从不存在的rooting()改为squareRoot()，修改后对应代码：

<td onclick="squareRoot()" class="changing-button">√</td>

修复完成后，输入9+6直接点击平方根按钮，会先计算9+6=15，再返回√15的计算结果，符合预期；单个数字开方逻辑不受影响，其余一元运算功能也会同步支持未求值算式直接计算。

提示：eval()直接执行输入内容存在XSS安全风险，仅适合本地个人项目使用，公网部署建议替换为math.js等专用表达式解析库。

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