运行JS代码出现Uncaught TypeError: read properties of null (reading 'value')报错如何解决

该错误的核心是document.getElementById("X")或document.getElementById("Y")返回了null，此时尝试读取null的value属性就会触发报错，对应解决方法如下：

• 代码执行时机早于DOM渲染完成
  如果你的JS代码写在<head>标签内，或是在页面元素渲染完成前就执行，会无法获取到还没渲染的DOM元素。
  解决方法二选一：
  1. 将JS代码移动到</body>闭合标签之前，保证DOM元素全部渲染完成后再执行取值逻辑
  2. 将代码包裹在DOM加载完成的事件回调中：

  window.addEventListener('DOMContentLoaded', function () {
    var Z = document.getElementById("X").value;
    var E = document.getElementById("Y").value;
    // 后续逻辑写在回调内部
  })
  

• 元素ID不匹配
  检查页面DOM中是否存在id为X和Y的元素，注意HTML的id属性大小写敏感，拼写错误、大小写不一致都会导致无法匹配到元素。
• 目标元素为动态生成
  如果X、Y元素是后续通过JS动态插入到页面的，执行原代码时元素还没被插入到DOM树中，也会返回null。
  解决方法：调整代码执行顺序，等动态元素插入DOM的逻辑执行完成后，再运行取值代码。

额外容错方案：可以增加元素存在性判断，避免出现报错阻断后续代码运行：

var Z, E;
const eleX = document.getElementById("X");
const eleY = document.getElementById("Y");
Z = eleX ? eleX.value : '';
E = eleY ? eleY.value : '';

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