JS报错Cannot set properties of null (setting 'disabled')排查

AI 小北

2026-9-2

报错原因

Cannot set properties of null (setting 'disabled')报错由以下问题导致：

元素获取失败：JS中使用document.getElementById("custominput")获取输入框，但对应HTML的输入框只设置了class="custominput"，没有配置id="custominput"属性，因此获取到的变量值为null，对null设置disabled属性就会抛出该错误。
功能逻辑写反：现有判断逻辑是选中custom选项时禁用输入框、选中其他选项时启用输入框，和需求完全相反。
潜在执行时机问题：如果JS代码放在HTML的<head>区域、早于DOM元素渲染执行，连id为qset的选择器都可能获取失败，触发额外报错。

修复方案

1. 修改HTML输入框属性

给自定义文本输入框补上缺失的id属性，将对应代码修改为：

<div id="customQ">
  Custom: <input id="custominput" class='custominput' type="text" name="last_name" disabled/>
</div>

2. 修正JS逻辑，增加DOM加载监听

调整JS执行时机、修正禁用状态判断逻辑，修改后代码如下：

// 等待DOM全部渲染完成后再执行绑定逻辑，避免元素获取失败
document.addEventListener('DOMContentLoaded', () => {
  const selector = document.getElementById("qset");
  const custominp = document.getElementById("custominput");

  // 初始化输入框状态：匹配当前下拉框默认值
  custominp.disabled = selector.value !== "custom";

  selector.addEventListener("change", () => {
    // 选中custom时启用输入框，其余场景禁用
    custominp.disabled = selector.value !== "custom";
  });
});

修复后效果