如何修复Cannot set properties of null (setting 'innerHTML')错误

你的代码出现Cannot set properties of null (setting 'innerHTML')错误，核心是DOM元素ID重复、属性不匹配导致的元素获取错误，以下是具体修复思路和代码：

错误根源 #

1. 重复ID冲突：HTML里<input>和<label>都用了id="selector"，DOM中ID必须唯一，document.getElementById("selector")只会返回第一个匹配的隐藏input元素，而input是自闭合标签，无法设置innerHTML，同时你实际想操作的是label元素，这直接触发报错。
2. label关联错误：label的for属性写的是file，但对应的input元素id是selector，点击label根本触发不了文件选择框，逻辑完全不匹配。
3. 元素获取ID错误：JS里用document.getElementById("file")获取输入框，但HTML里根本没有id为file的元素，这会导致fileInput为null，后续绑定事件也会出问题。

修复后的完整代码 #

HTML #

<input type="file" accept="video/* image/*" multiple name="" id="file" hidden>
<label for="file" class="upload" id="file-label"> Select a file: </label>

JavaScript #

let loader = function(e) {
  // 处理用户取消选择文件的情况
  if (!e.target.files || e.target.files.length === 0) return;
  
  let file = e.target.files;
  let show = "Selected File: " + file[0].name;

  let output = document.getElementById("file-label");
  output.innerHTML = show;
  output.classList.add("active");
};

let fileInput = document.getElementById("file");
// 确保元素存在再绑定事件，避免DOM加载顺序问题
if (fileInput) {
  fileInput.addEventListener('change', loader);
}

额外提示 #

• 把JS代码放在HTML的</body>标签之前，或者用DOMContentLoaded事件包裹，确保DOM完全加载后再执行JS，避免因元素未渲染导致的获取null问题。
• 如果支持多文件选择，可以循环遍历e.target.files来显示所有选中的文件名，而不是只取第一个。

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