JavaScript罗马数字转换器开发：如何匹配对象中最大适配数值

核心问题分析 #

• 参数传递失效：点击按钮或回车触发addOutput时未传入数字参数，函数内num为undefined，后续计算完全无法执行。
• 全局变量污染：内层循环的i未用let/const声明，会变成全局变量，可能引发意外bug。
• 冗余逻辑与无效代码：if (a >= 0)判断完全多余（Math.floor结果必然非负）；最后一行的逗号运算符return roman, output.innerHTML...没有实际作用。
• 数值处理缺失：else分支中未将输入框的字符串值转为数字赋值给num，循环逻辑无有效输入。

修复后的完整代码 #

const numberInput = document.getElementById("number");
const convertBtn = document.getElementById("convert-btn");
const output = document.getElementById("output");

const removeHide = () => {
  output.classList.remove("hide");
};

const addOutput = () => {
  let roman = "";
  // 先获取并转换输入值为数字
  const inputNum = Number(numberInput.value);

  const romanNumbers = {
    M: 1000, 
    CM: 900, 
    D: 500, 
    CD: 400, 
    C: 100, 
    XC: 90, 
    L: 50, 
    XL: 40,
    X: 10,  
    V: 5, 
    IV: 4, 
    I: 1
  };

  if (numberInput.value === "") {
    removeHide();
    output.innerHTML = `<p>请输入有效的数字</p>`;
    return;
  } else if (inputNum <= 0) {
    removeHide();
    output.innerHTML = `<p>请输入大于或等于1的数字</p>`;
    return;
  } else if (inputNum >= 4000) {
    removeHide();
    output.innerHTML = `<p>请输入小于或等于3999的数字</p>`;
    return;
  }

  // 复制输入值，避免修改原始值
  let num = inputNum;
  for (let key in romanNumbers) {
    const count = Math.floor(num / romanNumbers[key]);
    // 仅当count>0时执行拼接和取余
    if (count > 0) {
      roman += key.repeat(count);
      num = num % romanNumbers[key];
    }
  }

  removeHide();
  output.innerHTML = `<p>${roman}</p>`;
};

convertBtn.addEventListener('click', addOutput);

numberInput.addEventListener('keydown', (e) => {
  if (e.key === "Enter") {
    addOutput();
  }
})

关键优化点 #

• 移除addOutput的无用参数，直接在函数内获取并转换输入值为数字，解决参数传递问题。
• 用key.repeat(count)替代内层循环，简化字符拼接逻辑，同时避免未声明变量的问题。
• 调整边界判断：将<= -1改为<=0，覆盖0的情况，逻辑更严谨。
• 去掉冗余的if (a >=0)判断，仅在count>0时执行操作，提升代码效率。
• 重构return逻辑，每个分支直接赋值后return，代码结构更清晰。

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