JavaScript计算器开发：eval函数问题及加号按钮无响应求助

1. 修复加号按钮无响应问题 #

你的HTML代码存在语法错误，导致后续JavaScript逻辑无法正常执行：

• 根号按钮的onclick属性写法无效：onclick=" "add> 会破坏页面的事件绑定解析，进而影响包括加号按钮在内的所有后续按钮事件。

将该按钮代码修正为：

<div id="bracketClose"><button id="root" onclick="">√</button></div>

（后续要实现根号功能时，再补充对应函数即可）

修正后，加号按钮的add('+')事件就能正常触发。

2. 修复eval函数的使用问题 #

你的equal函数存在两处错误：

• x是DOM元素对象，直接传入eval会报错，需要提取它的innerHTML值（即计算器显示的表达式字符串）
• 执行计算后，需将结果赋值回x.innerHTML，而非覆盖x变量本身

修改后的equal函数：

function equal() {
  try {
    // 取出显示的表达式并计算
    const result = eval(x.innerHTML);
    // 将计算结果放回显示区域
    x.innerHTML = result;
  } catch (err) {
    // 处理非法表达式的错误情况
    x.innerHTML = 'Error';
  }
}

3. 补充未实现的函数 #

代码中调用了addDote和procent函数但未实现，补充如下：

// 小数点处理：避免重复添加
function addDote(dot) {
  if (!x.innerHTML.includes('.')) {
    x.innerHTML += dot;
  }
}

// 百分比处理：简单实现为当前数值除以100
function procent(sign) {
  const currentVal = parseFloat(x.innerHTML);
  if (!isNaN(currentVal)) {
    x.innerHTML = (currentVal / 100).toString();
  }
}

关键说明 #

• 不要用.value操作<div id="wind">，div元素没有value属性，只有表单元素（如input）才有，因此使用innerHTML是正确选择。
• eval存在安全风险，如果是面向公开用户的计算器，建议使用更安全的表达式解析方案（如自行实现简单运算逻辑，或使用math.js这类专业库）。

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