如何封装document.getElementById避免重复代码，实现可传ID调用？

你的思路方向是完全正确的，封装重复的DOM取值+类型转换逻辑，能够有效减少冗余代码，提升代码可维护性，是前端开发中非常推荐的实践。

你写的示例语法存在错误：你给出的documentById写法是直接执行了一次取值逻辑，没有将其定义为可接收参数的函数，因此无法重复传入不同ID调用。

正确实现方案 #

你可以按照如下方式定义工具函数：

// 封装按ID获取表单元素值并转成十进制整数的逻辑
function getIntValueById(elementId) {
  // 先判断元素是否存在，避免元素不存在时报错打断后续代码执行
  const targetElement = document.getElementById(elementId);
  if (!targetElement) {
    // 可根据业务需求调整默认返回值，比如返回0、null等
    return NaN;
  }
  // parseInt第二个参数传10，指定按十进制解析，避免字符串以0开头时被误解析为八进制
  return parseInt(targetElement.value, 10);
}

调用方式和你期望的效果一致：

let length = getIntValueById("length");
let start = getIntValueById("start");
let end = getIntValueById("end");

方案合理性说明 #

这个封装方式非常合理，适配你当前有多个同类型表单取值的场景：

• 减少重复代码，后续新增同类型取值只需要调用一行函数即可
• 逻辑收敛，如果后续需要统一修改取值规则（比如增加空值默认值、统一做输入校验），只需要修改函数内部逻辑即可，不需要逐个修改所有取值位置

学习建议 #

• 可以根据业务需求扩展更多通用封装，比如获取原始字符串值的getValueById、获取浮点数的getFloatValueById，进一步覆盖更多重复场景
• 优先考虑边界情况处理，比如元素不存在、输入内容不是合法数字的场景，在函数内加对应处理逻辑，避免页面出现运行时报错
• 注意变量名、元素ID的拼写一致性，你示例代码中的lenght属于拼写错误，实际开发中要避免这类低级问题带来的额外调试成本

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