如何解决JS获取input值时报Uncaught TypeError: Cannot read property 'value' of null错误

这个报错的核心是document.getElementById("displayValue")执行时没有找到对应DOM元素，返回了null，读取null的value属性就触发了类型错误，可按以下步骤排查修复：

• 调整JS执行时机
  绝大多数情况是JS代码在DOM节点渲染完成前就执行了，比如把JS代码放在<head>标签内、或者放在表格HTML代码的前面。
  修复方案1：把所有涉及DOM操作的JS代码放到</body>标签的前面，保证DOM加载完成后再执行JS。
  修复方案2：用DOMContentLoaded事件包裹所有DOM操作代码，示例如下：

  document.addEventListener('DOMContentLoaded', function () {
    // 所有获取元素、绑定事件、计算逻辑都写在这个回调内
    let input_displayValue = document.getElementById("displayValue").value;
    // 后续业务逻辑
  })
  

• 修正ID重复/拼写问题
  首先确认你要获取的元素id确实是displayValue，拼写完全一致，区分大小写。另外你提供的HTML代码中存在大量ID重复的问题：
  • 多个<option>标签的id都是dd_option
  • 多个<input>标签的id都是dephin
    DOM规范要求页面内ID必须全局唯一，重复ID会导致getElementById无法正确匹配目标元素，你需要把所有重复的ID都改为唯一值，重复的元素可以用class属性标识。
• 修复HTML语法错误
  你提供的代码中id为idValue的输入框存在语法错误：ty pe="hidden"是打字错误，要改为type="hidden"，避免异常的DOM解析影响元素获取。
• 动态生成表格的额外处理
  如果这个表格是你用JS动态插入到页面中的，必须保证表格插入完成、DOM渲染完毕后，再执行获取displayValue元素的代码。

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