JavaScript计算器显示满时清除按钮失效问题求助

核心问题 #

1. jQuery对象被错误覆盖：你在超限检测代码里执行了mathDisplay = maxSize，把原本的jQuery对象（比如$('.display')）替换成了字符串。之后常规清除代码里的mathDisplay.text(mathString)会直接失效，因为字符串没有text()方法——这就是清除按钮失效的根本原因。
2. 重复绑定事件：每次触发超限检测时，都会给.calculator-button绑定一次新的click事件，多次触发后会导致事件叠加，逻辑混乱。

修正后的代码 #

显示超限检测代码

const currentText = mathDisplay.text().trim();
if (currentText.length > 18) {
    const maxSize = currentText.substring(0, 18);
    // 直接修改显示文本，不要覆盖mathDisplay变量
    mathDisplay.text(maxSize);

    $('.limit-alert').addClass('limit-alert-active');

    setTimeout(() => {
        $('.limit-alert').removeClass('limit-alert-active');
    }, 3000);
}

常规清除按钮代码（统一事件绑定）

// 确保事件只绑定一次，放在页面初始化回调中
$(document).ready(function() {
    $('.calculator-button').on('click', function () {
        if ($(this).hasClass('clear')) {
            mathString = '0';
            mathDisplay.text(mathString);
        }
        // 其他按钮（数字、运算符等）的处理逻辑写在这里
    });
});

优化建议：提前限制输入 #

与其在输入后截断，不如在用户输入前检查长度，避免无效输入：

$(document).ready(function() {
    $('.calculator-button').on('click', function () {
        const $btn = $(this);
        if ($btn.hasClass('number') || $btn.hasClass('operator')) {
            const currentLength = mathDisplay.text().trim().length;
            if (currentLength >= 18) {
                $('.limit-alert').addClass('limit-alert-active');
                setTimeout(() => {
                    $('.limit-alert').removeClass('limit-alert-active');
                }, 3000);
                return; // 阻止添加新字符
            }
            // 执行添加数字/运算符的逻辑
            mathString += $btn.text();
            mathDisplay.text(mathString);
        } else if ($btn.hasClass('clear')) {
            mathString = '0';
            mathDisplay.text(mathString);
        }
    });
});

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