计算器功能优化求助：支持小数与百分比计算

一、小数运算错误修复 #

你使用逗号（,）作为小数点，但parseFloat()仅识别点（.）作为小数点分隔符，导致"3,5"被解析为3，最终计算结果错误。修复时需要在数值解析前将逗号替换为点，同时保留界面显示逗号的逻辑。

二、百分比功能失效修复 #

当前百分比逻辑不符合常规计算器行为，且未处理单目运算场景（如直接点击%将数值转为百分比）。常规计算器的百分比逻辑分为两种：

• 单目场景：输入数值后点击%，将数值除以100（如输入50 → 点击% → 0.5）
• 双目场景：输入第一个数+运算符+第二个数+%，计算第一个数的第二个数百分比（如200 + 50% → 200 + 100 = 300）

以下是修复后的完整代码：

修复后的JavaScript代码 #

const buttons = document.querySelectorAll(".buttons-container button");
const currentOperation = document.querySelector(".current-operation");
currentOperation.textContent = "0";

buttons.forEach(button => button.addEventListener("click", handleButtonClick));

let currentValue = "";
let previousValue = "";
let operation = "";

function handleButtonClick(event) {
  const button = event.target;
  const buttonValue = button.textContent;

  // 数字按钮处理
  if (button.classList.contains("number")) {
    if (buttonValue === ",") {
      if (currentValue.indexOf(",") === -1) {
        currentValue += buttonValue;
      }
    } else {
      currentValue += buttonValue;
    }
    currentOperation.textContent = currentValue;
  }

  // 运算符按钮处理
  if (buttonValue === "+" || buttonValue === "-" || buttonValue === "*" || buttonValue === "/") {
    operation = buttonValue;
    currentOperation.textContent = operation;
    previousValue = currentValue;
    currentValue = "";
  }

  // 百分比按钮单独处理
  if (buttonValue === "%") {
    // 单目运算：当前值转为百分比
    if (currentValue) {
      const num = parseFloat(currentValue.replace(",", "."));
      const result = num / 100;
      // 显示时转回逗号
      currentValue = result.toString().replace(".", ",");
      currentOperation.textContent = currentValue;
    } 
    // 双目运算场景：已有前值和运算符时，计算前值的当前值百分比
    else if (previousValue && operation) {
      const prevNum = parseFloat(previousValue.replace(",", "."));
      const currNum = parseFloat(currentValue.replace(",", "."));
      let result;
      switch(operation) {
        case "+":
          result = prevNum + (prevNum * currNum / 100);
          break;
        case "-":
          result = prevNum - (prevNum * currNum / 100);
          break;
        case "*":
          result = prevNum * (currNum / 100);
          break;
        case "/":
          result = prevNum / (currNum / 100);
          break;
      }
      currentValue = result.toString().replace(".", ",");
      currentOperation.textContent = currentValue;
      previousValue = "";
      operation = "";
    }
  }

  // 等于按钮处理
  if (button.classList.contains("equal-btn")) {
    let result;
    const prevNum = parseFloat(previousValue.replace(",", "."));
    const currNum = parseFloat(currentValue.replace(",", "."));

    switch (operation) {
      case "+":
        result = prevNum + currNum;
        break;
      case "-":
        result = prevNum - currNum;
        break;
      case "*":
        result = prevNum * currNum;
        break;
      case "/":
        result = prevNum / currNum;
        break;
    }

    // 显示结果时转回逗号
    currentOperation.textContent = result.toString().replace(".", ",");
    previousValue = "";
    currentValue = "";
    operation = "";
  }

  // AC按钮处理
  if (button.classList.contains("AC-btn")) {
    previousValue = "";
    currentValue = "";
    operation = "";
    currentOperation.textContent = "0";
  }
}

原HTML代码（无需修改） #

<div class="calc">
  <div class="operations">
    <!--display-->
    <div class="name">Calculadora</div>
    <div class="current-operation"></div>
  </div>
  <div class="buttons-container">
    <button class="AC-btn">AC</button>
    <button>%</button>
    <button>/</button>
    <button class="number">7</button>
    <button class="number">8</button>
    <button class="number">9</button>
    <button>*</button>
    <button class="number">4</button>
    <button class="number">5</button>
    <button class="number">6</button>
    <button>-</button>
    <button class="number">1</button>
    <button class="number">2</button>
    <button class="number">3</button>
    <button>+</button>
    <button class="number">0</button>
    <button class="number">,</button>
    <button class="equal-btn">=</button>
  </div>
</div>

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