JavaScript基础计算器中小数点输入与计算的优化实践

num1 = num1 * 10 + parseFloat(clickedValue);

const inputField = document.querySelector("#inputField");
const container = document.querySelector(".main-container");
const allClear = document.querySelector("#all-clear");
const switchButton = document.querySelector("#switch");

// 事件监听器
allClear.addEventListener("click", clear);
switchButton.addEventListener("click", change);
container.addEventListener("click", handleClick);

// 全局变量，用于存储运算数和运算符
let operator = "";
let num1 = null;
let num2 = null;

/**
 * 清空输入字段
 */
function clear() {
    inputField.value = ""; // 将输入字段清空为字符串，而不是0
}

/**
 * 切换当前显示数字的正负
 */
function change() {
    let inputValue = parseFloat(inputField.value);

    // 确保输入字段非空且为有效数字
    if (!isNaN(inputValue)) {
        inputField.value = -inputValue; // 直接对解析后的数值取反
        // 如果当前正在输入num1，也更新num1
        if (operator === "") {
            num1 = parseFloat(inputField.value);
        } else { // 如果正在输入num2，也更新num2
            num2 = parseFloat(inputField.value);
        }
    }
}

/**
 * 处理所有按钮点击事件
 * @param {Event} event - 点击事件对象
 */
function handleClick(event) {
    const clickedButton = event.target;
    const clickedValue = clickedButton.textContent;

    // 1. 处理数字按钮和小数点
    if (!isNaN(clickedValue) || clickedValue === ".") {
        // 如果输入字段当前显示的是运算符，或者刚完成一次计算，需要清空以便输入新数字
        // 这一步是关键，确保在输入第二个数字前清空显示
        if (inputField.value === operator && operator !== "") {
            inputField.value = "";
        }

        if (clickedValue === ".") {
            // 只有当输入字段中不包含小数点时才添加
            if (!inputField.value.includes(".")) {
                inputField.value += clickedValue;
            }
        } else {
            // 直接将数字追加到输入字段
            inputField.value += clickedValue;
        }

        // 实时更新 num1 或 num2 的值，以便在切换正负等操作时能获取到最新数值
        if (operator === "") {
            num1 = parseFloat(inputField.value);
        } else {
            num2 = parseFloat(inputField.value);
        }
    }

    // 2. 处理运算符按钮
    if (clickedValue === "+" || clickedValue === "-" || clickedValue === "*" || clickedValue === "/" || clickedValue === "%") {
        // 如果已经有num1但没有num2，并且inputField不是空的，则将当前inputField的值作为num1
        if (num1 === null && inputField.value !== "") {
            num1 = parseFloat(inputField.value);
        }
        // 如果已经有num1和operator，并且inputField中有值（即num2已输入），则先计算
        if (num1 !== null && operator !== "" && inputField.value !== "" && num2 !== null) {
             // 确保在链式操作时，num2是当前inputField的值
            num2 = parseFloat(inputField.value);
            let result = calculate(num1, num2, operator);
            inputField.value = result;
            num1 = result; // 将结果作为新的num1
            num2 = null; // 清空num2
        } else if (inputField.value !== "") { // 首次输入运算符
            num1 = parseFloat(inputField.value); // 确保num1是当前显示的值
        }
        operator = clickedValue;
        inputField.value = clickedValue; // 显示运算符
        // 不立即清空inputField，而是在下次数字输入时清空，这使得用户可以看到运算符
        // 并在输入第二个数字时覆盖它。或者，为了更清晰，也可以直接清空：
        // inputField.value = ""; // 立即清空，准备输入num2
    }

    // 3. 处理等号按钮
    if (clickedValue === "=") {
        // 只有当num1、num2和operator都存在时才进行计算
        if (num1 !== null && num2 !== null && operator !== "") {
            let result = calculate(num1, num2, operator);
            inputField.value = result;
            num1 = result; // 将结果作为新的num1，支持链式计算
            num2 = null;
            operator = ""; // 清空运算符
        }
    }
}

/**
 * 执行实际的数学计算
 * @param {number} n1 - 第一个操作数
 * @param {number} n2 - 第二个操作数
 * @param {string} op - 运算符
 * @returns {number} 计算结果
 */
function calculate(n1, n2, op) {
    let result;
    switch (op) {
        case "+":
            result = n1 + n2;
            break;
        case "-":
            result = n1 - n2;
            break;
        case "*":
            result = n1 * n2;
            break;
        case "/":
            if (n2 === 0) {
                return "Error: Division by zero"; // 处理除零错误
            }
            result = n1 / n2;
            break;
        case "%":
            result = n1 % n2;
            break;
        default:
            result = 0;
    }
    return result;
}