开发Odin Project计算器：如何处理0.53类输入及按钮事件问题

你的核心问题是原代码没考虑小数点输入场景，同时前置0的处理逻辑也不周全，导致无法正确生成0.53这类合法小数。以下是修正后的按钮点击事件处理代码：

buttons.forEach((btn) =>
  btn.addEventListener("click", function (e) {
    const displayValue = e.target.innerText;
    const currentDisplay = display.innerText;

    // 处理不同输入场景
    if (displayValue === ".") {
      // 已有小数点则不再重复添加
      if (!currentDisplay.includes(".")) {
        // 当前显示为0时，点击小数点转为"0."
        display.innerText = currentDisplay === "0" ? "0." : currentDisplay + ".";
      }
    } else if (!isNaN(displayValue)) {
      // 输入为数字的情况
      if (currentDisplay === "0") {
        // 当前显示0时，直接替换为输入数字（避免05这类无效格式）
        display.innerText = displayValue;
      } else {
        // 其他合法状态下直接追加数字
        display.innerText += displayValue;
      }
    } else {
      // 扩展处理运算符（比如加减乘除）的逻辑
      if (!isNaN(parseFloat(currentDisplay))) {
        display.innerText += displayValue;
      }
    }
  })
);

关键逻辑说明 #

• 小数点处理：先判断当前显示是否已有小数点，避免出现0.5.3这类错误格式；若当前显示是0，点击小数点后转为"0."，为后续输入小数位做准备。
• 数字输入处理：当前显示为"0"时，直接替换为输入数字（比如输入5直接变成5，而非05）；若当前是合法数值（比如0.），则直接追加数字，最终形成0.53这类正确格式。
• 运算符扩展：预留了运算符处理入口，方便后续添加运算逻辑。

原代码的问题点：

1. 未针对小数点做特殊判断，无法生成带小数的数值；
2. 前置0处理逻辑错误，比如当前显示0时输入5，会变成05而非5；
3. +[display.innerText].shift().toString()操作无效，本质只是取第一个字符，无法正确处理数值格式。

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