如何在JavaScript计算器中实现自定义输入错误提示？

没问题！我来帮你把计算器的默认错误替换成自定义提示。咱们可以通过自定义Error类结合try-catch异常处理来实现，下面是具体的修改方案：

步骤1：创建自定义错误类 #

首先定义一个专属的错误类型，这样能更清晰地区分输入错误和其他系统错误：

// 自定义输入错误类，继承原生Error
class InputError extends Error {
  constructor(message) {
    super(message);
    this.name = 'InputError'; // 标记错误名称，方便精准识别
  }
}

步骤2：修改点击事件的验证逻辑 #

在你现有点击事件的基础上，添加输入合法性校验，当用户输入非法内容时抛出自定义错误，并用try-catch捕获处理：

var Scrn = document.querySelector('#screen');
var maibox = document.querySelector('.calBox');
var exp = '';
var errro_btn = document.querySelector('#error_screen');
var close = document.querySelector('#close')

// 定义计算器允许的合法输入字符（可根据你的功能需求调整）
const validInputs = ['0','1','2','3','4','5','6','7','8','9','+','-','*','/','.', '(', ')','=','C'];

maibox.addEventListener('click', (e) => {
  try {
    let vlu = e.target.value;
    if (vlu) {
      // 校验当前输入是否属于合法内容
      if (!validInputs.includes(vlu)) {
        // 抛出自定义错误，携带提示文本
        throw new InputError('你输入了错误的内容');
      }

      // 保留你原本的计算器逻辑（拼接表达式、计算、清空等）
      if (vlu === '=') {
        // 计算环节也包裹try-catch，处理非法表达式/除零等错误
        try {
          exp = eval(exp);
          Scrn.value = exp;
        } catch (calcErr) {
          // 计算出错也统一抛出自定义错误
          throw new InputError('你输入了错误的内容');
        }
      } else if (vlu === 'C') {
        exp = '';
        Scrn.value = exp;
      } else {
        exp += vlu;
        Scrn.value = exp;
      }
    }
  } catch (err) {
    // 仅捕获我们定义的输入错误，显示提示框
    if (err instanceof InputError) {
      errro_btn.style.display = 'block';
      // 如果错误提示框有文本区域，可直接赋值提示内容
      // errro_btn.querySelector('.error-content').textContent = err.message;
    } else {
      // 其他未知错误，做兜底日志记录
      console.error('未知错误:', err);
    }
  }
});

// 关闭错误提示框的逻辑
close.addEventListener('click', () => {
  errro_btn.style.display = 'none';
});

关键说明 #

• 自定义错误类：通过继承原生Error，我们可以创建专属的错误类型，方便在catch块里精准区分输入错误和其他系统错误。
• 输入校验：用validInputs数组明确所有允许的操作按钮，只要用户点击的按钮不在这个范围内，就触发自定义错误。
• 全流程异常处理：不仅在输入环节校验，连计算环节的错误（比如除零、非法表达式）也统一抛出自定义错误，保证提示风格一致。
• 提示框控制：捕获到错误后显示预设的错误提示框，关闭按钮负责隐藏提示，符合用户交互习惯。

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