CodePen运行JavaScript代码出现404错误及else分支报错问题咨询

核心原因 #

出现404错误的关键是全局变量名冲突：CodePen页面环境中，input这个变量名可能已被绑定到页面的DOM输入元素（比如<input>标签），当你在else分支里直接对input执行input -= number这类数值操作时，会意外修改DOM元素的属性，进而触发浏览器的异常资源请求，导致404错误。而freeCodeCamp的代码环境不存在这个命名冲突，因此能正常运行。

修复步骤 #

1. 规避全局变量名冲突：在else分支里，不要直接操作全局的input，先将其赋值给局部变量后再进行数值计算：

else {
  let result = "";
  // 用局部变量存储输入值，避免修改全局的input（可能是DOM元素）
  let currentNum = input;
  for (const [symbol, number] of numerals) {
    while (currentNum >= number) {
      result += symbol;
      currentNum -= number;
    }
  }
  output.innerText = result;
}

2. 确认DOM元素获取正确：检查output变量是否正确获取到目标DOM元素，比如确保HTML中有对应元素（如<div id="output"></div>），且获取代码（如const output = document.getElementById('output');）无错误。

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