如何实现计算器AC/C按钮切换及清除功能？JS新手求助

首先得给你的计算器补上AC/C按钮，再实现对应的切换和清除逻辑，以下是修改后的完整代码和说明：

修改后的完整代码 #

HTML部分 #

<form id="calc_form">
  <input type="text" id="output" value="0" /> <!-- 给输入框设初始值0 -->
  <br />
  <button type="button" data-type="clear">AC</button> <!-- 新增AC/C按钮 -->
  <button type="button" data-type="operand" value="1">1</button>
  <button type="button" data-type="operand" value="2">2</button>
  <button type="button" data-type="operand" value="3">3</button>
  <button type="button" data-type="operand" value="4">4</button>
  <button type="button" data-type="operand" value="5">5</button>
  <button type="button" data-type="operand" value="6">6</button>
  <button type="button" data-type="operand" value="7">7</button>
  <button type="button" data-type="operand" value="8">8</button>
  <button type="button" data-type="operand" value="9">9</button>
  <button type="button" data-type="operand" value="0">0</button>
  <button type="button" data-type="operand" value=".">.</button> <!-- 补上小数点按钮 -->
  <br />
  <button type="button" data-type="operator" value="+">+</button>
  <button type="button" data-type="operator" value="-">-</button>
  <button type="button" data-type="operator" value="*">*</button>
  <button type="button" data-type="operator" value="/">/</button>
  <button type="button" data-type="operator" value="%">%</button>
  <button type="button" data-type="operator" value="invert">-1</button>
  <button type="button" data-type="operator" value="=">=</button>
</form>

修改点：新增AC/C按钮，给输入框设置初始值0，补上遗漏的小数点按钮

CSS部分 #

body { text-align: center; }
button, input { margin: 0.5rem 0.1rem; }
.active { background: #FF8; }

CSS无需额外修改，保持原样即可

JavaScript部分 #

const output = document.getElementById("output");
const form = document.getElementById("calc_form");
const operand_btns = document.querySelectorAll("button[data-type=operand]");
const operator_btns = document.querySelectorAll("button[data-type=operator]");
const clear_btn = document.querySelector("button[data-type=clear]"); // 获取清除按钮

form.addEventListener("submit", (e) => {
  e.preventDefault();
});

let is_operator = false;
let equation = [];

const remove_active = () => {
  operator_btns.forEach((btn) => {
    btn.classList.remove("active");
  });
};

operand_btns.forEach((btn) => {
  btn.addEventListener("click", (e) => {
    remove_active();
    // 点击操作数时，把AC改成C
    clear_btn.textContent = "C";
    
    if (output.value == "0") {
      output.value = e.target.value;
    } else if (output.value.includes(".") && e.target.value === ".") {
      // 避免重复输入小数点
      return;
    } else if (is_operator) {
      is_operator = false;
      output.value = e.target.value;
    } else {
      output.value = output.value + "" + e.target.value;
    }
  });
});

operator_btns.forEach((btn) => {
  btn.addEventListener("click", (e) => {
    remove_active();
    e.currentTarget.classList.add("active");

    switch (e.target.value) {
      case "%":
        output.value = parseFloat(output.value) / 100;
        break;
      case "invert":
        output.value = parseFloat(output.value) * -1;
        break;
      case "=":
        equation.push(output.value);
        output.value = eval(equation.join(""));
        equation = [];
        is_operator = false;
        // 计算完成后，按钮变回AC
        clear_btn.textContent = "AC";
        break;
      default:
        let last_item = equation[equation.length - 1];
        if (["/", "*", "+", "-"].includes(last_item) && is_operator) {
          equation.pop();
          equation.push(e.target.value);
        } else {
          equation.push(output.value);
          equation.push(e.target.value);
        }
        is_operator = true;
        break;
    }
  });
});

// 清除按钮的点击事件
clear_btn.addEventListener("click", () => {
  // 清除输入框内容，恢复为0
  output.value = "0";
  // 移除所有运算符的active类
  remove_active();
  // 重置计算器状态
  equation = [];
  is_operator = false;
  // 按钮文本改回AC
  clear_btn.textContent = "AC";
});

修改点：

• 新增获取清除按钮的代码
• 在操作数按钮点击事件中，添加切换按钮文本为C的逻辑
• 新增清除按钮的点击事件：实现清除输入框、移除active类、重置计算器状态、改回AC文本
• 优化了小数点重复输入的判断，计算完成后自动把按钮改回AC

逻辑说明 #

• 初始状态下，清除按钮显示AC
• 点击任意操作数按钮，按钮立刻切换为C
• 点击C按钮：输入框恢复为0，所有运算符按钮的active类被移除，计算器状态重置，按钮变回AC
• 点击等号完成计算后，按钮也会自动变回AC，符合常规计算器的使用逻辑

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