如何用单个按钮按需调用不同函数实现带下拉运算符的计算器

AI 小北

2026-8-9

修正计算器等于按钮执行所有运算的问题

核心解决思路

为加法、减法、乘法、除法分别编写独立的纯函数，接收两个数值参数并返回计算结果
给运算符下拉框设置唯一id，方便获取当前选中的运算符类型
重构等于按钮的点击事件逻辑：仅根据选中的运算符调用对应运算函数，而非遍历执行所有函数

完整代码示例

HTML 结构

<input type="number" id="num1" placeholder="输入第一个数">
<select id="operator">
  <option value="add">加法(+)</option>
  <option value="sub">减法(-)</option>
  <option value="mul">乘法(*)</option>
  <option value="div">除法(/)</option>
</select>
<input type="number" id="num2" placeholder="输入第二个数">
<button id="equalBtn">=</button>
<div id="result">计算结果：</div>

JavaScript 逻辑

// 独立运算函数
function add(a, b) {
  return a + b;
}

function sub(a, b) {
  return a - b;
}

function mul(a, b) {
  return a * b;
}

function div(a, b) {
  if (b === 0) return "除数不能为0";
  return a / b;
}

// 等于按钮点击事件
document.getElementById('equalBtn').addEventListener('click', function() {
  const num1 = parseFloat(document.getElementById('num1').value);
  const num2 = parseFloat(document.getElementById('num2').value);
  const operator = document.getElementById('operator').value;
  let result;

  // 根据选中的运算符匹配对应函数
  switch(operator) {
    case 'add':
      result = add(num1, num2);
      break;
    case 'sub':
      result = sub(num1, num2);
      break;
    case 'mul':
      result = mul(num1, num2);
      break;
    case 'div':
      result = div(num1, num2);
      break;
    default:
      result = "请选择运算符";
  }

  // 显示结果
  document.getElementById('result').textContent = `计算结果：${result}`;
});