如何实现计算器功能？求助点击按钮动态修改元素ID的方法

嘿，我明白你现在的困扰啦——你的计算器不管点哪个操作按钮，功能都跟加号一样，这是因为你在getResult函数里硬编码了固定获取id为op1的元素值，不管点什么按钮，这个值都没变化，自然所有计算都用加号啦。下面给你两种简单的解决思路，你可以根据自己的代码结构选：

方法一：用变量存储当前操作符（更简洁） #

这种方式不需要依赖固定id的元素，直接用变量记录用户点击的操作符：

1. 修改HTML操作符按钮 #

给每个操作符按钮绑定点击事件，传递对应的操作符：

<!-- 给每个操作符按钮添加点击事件 -->
<button onclick="setOperator('+')">+</button>
<button onclick="setOperator('-')">-</button>
<button onclick="setOperator('*')">*</button>
<button onclick="setOperator('/')">/</button>

<!-- 输入框和结果显示区域 -->
<input type="number" id="number1" placeholder="第一个数">
<input type="number" id="number2" placeholder="第二个数">
<button onclick="getResult()">计算</button>
<div id="result"></div>

2. 修改JavaScript代码 #

定义全局变量存储当前操作符，然后在计算时使用这个变量：

// 全局变量，记录用户选中的操作符
let currentOperator = '';

// 点击操作符按钮时，更新当前操作符
function setOperator(op) {
  currentOperator = op;
  // 可选：如果需要在页面上显示当前选中的操作符，可以加这行
  // document.getElementById('current-op').textContent = `当前操作符：${op}`;
}

function getResult() {
  // 获取两个输入框的数值
  const num1 = parseFloat(document.getElementById("number1").value);
  const num2 = parseFloat(document.getElementById("number2").value);
  let result;

  // 根据当前操作符执行对应计算
  switch(currentOperator) {
    case '+':
      result = num1 + num2;
      break;
    case '-':
      result = num1 - num2;
      break;
    case '*':
      result = num1 * num2;
      break;
    case '/':
      // 处理除数为0的异常情况
      if(num2 === 0) {
        result = '错误：不能除以0';
      } else {
        result = num1 / num2;
      }
      break;
    default:
      result = '请先选择一个操作符';
  }

  // 把结果显示到页面上
  document.getElementById('result').textContent = result;
}

方法二：更新固定id元素的value（贴近你原有代码） #

如果你想保留原来通过获取元素值的方式，不需要改太多代码，只需要在点击按钮时更新op1元素的value即可：

1. 修改HTML操作符按钮 #

<button onclick="updateOp('+')">+</button>
<button onclick="updateOp('-')">-</button>
<button onclick="updateOp('*')">*</button>
<button onclick="updateOp('/')">/</button>

<!-- 保留你原来的op1元素，比如隐藏的input -->
<input type="hidden" id="op1" value="">

2. 修改JavaScript代码 #

添加一个更新操作符的函数，然后getResult函数可以继续使用原来的逻辑：

// 点击按钮时更新op1元素的value
function updateOp(op) {
  document.getElementById('op1').value = op;
}

function getResult() {
  var result1 = parseFloat(document.getElementById("number1").value);
  var result3 = document.getElementById("op1").value;
  var result2 = parseFloat(document.getElementById("number2").value);
  let result;

  // 根据result3里的操作符计算
  switch(result3) {
    case '+':
      result = result1 + result2;
      break;
    case '-':
      result = result1 - result2;
      break;
    case '*':
      result = result1 * result2;
      break;
    case '/':
      if(result2 === 0) {
        result = '错误：不能除以0';
      } else {
        result = result1 / result2;
      }
      break;
    default:
      result = '请选择操作符';
  }

  // 显示结果（假设你有一个id为showResult的元素）
  document.getElementById('showResult').textContent = result;
}

这两种方法都能解决你的问题，方法一更灵活，方法二更贴近你现有的代码结构，选哪个都可以~

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