元素含初始内容时触发Uncaught TypeError: altResolution is null的原因

问题现象 #

我需要将输入框的值同步到id为alt-resolution的p元素中，但出现了差异表现：

• 当该p元素初始包含内容（如16）时，控制台触发Uncaught TypeError: altResolution is null错误
• 当该p元素初始为空时，代码可正常运行

相关代码 #

出错场景的HTML代码 #

<input id="resolution" type="text"><p> x </p><p id="alt-resolution">16</p>

JavaScript代码 #

const pixelInput = document.querySelector('input#resolution');
const altResolution = document.querySelector('p#alt-resolution');

pixelInput.addEventListener('input', () => {
  altResolution.innerHTML = pixelInput.value;
});

正常运行的HTML代码 #

<p id="alt-resolution"></p>

原因分析 #

这个错误的核心并非p元素的初始内容，而是JavaScript代码的执行时机问题：

• 当JS代码在浏览器尚未完全解析到<p id="alt-resolution">16</p>元素时就执行了document.querySelector，会因找不到目标元素返回null，后续赋值操作自然触发类型错误。
• 初始为空的场景看似正常，大概率是巧合：比如此时JS代码被放在了HTML元素之后加载（如</body>标签前），确保了DOM元素已被解析；而非空内容的场景下，JS代码可能被放在了HTML元素之前，导致DOM未加载完成就执行查询。

解决方法 #

• 方法一：调整JS代码位置：将JS代码放到HTML文档的末尾、</body>标签之前，确保所有DOM元素加载完成后再执行JS。
• 方法二：监听DOM加载完成事件：用DOMContentLoaded事件包裹代码，确保DOM解析完成后再查询元素：

document.addEventListener('DOMContentLoaded', () => {
  const pixelInput = document.querySelector('input#resolution');
  const altResolution = document.querySelector('p#alt-resolution');

  pixelInput.addEventListener('input', () => {
    altResolution.innerHTML = pixelInput.value;
  });
});

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