JavaScript给input赋值时报Cannot set property 'value' of null错误如何解决

错误原因 #

TypeError: Cannot set property 'value' of null 报错的核心原因是 document.getElementById("email") 执行后返回了null，程序尝试为null设置value属性从而触发异常。
你提供的HTML中明确存在id="email"的输入框，因此绝大多数场景是JS代码执行时机早于DOM元素渲染完成：比如你的JS代码写在<head>标签内、或是放在<input>元素的上方，代码执行时页面还没有完成对应输入框的渲染，自然无法匹配到目标元素。

解决方案 #

可以任选以下任意一种方案解决：

• 方案1：调整JS代码的放置位置
  把赋值逻辑的JS代码移动到<body>标签的最末尾，保证所有DOM元素渲染完成后再执行JS逻辑。
• 方案2：使用DOMContentLoaded事件包裹执行逻辑
  监听DOM树加载完成事件，等所有元素渲染完毕后再执行赋值操作，不受JS代码放置位置的影响，代码示例如下：

document.addEventListener('DOMContentLoaded', function () {
  document.getElementById("email").value = "testemail@gmail.com";
})

• 方案3：如果是动态生成的输入框，需要在元素插入到DOM的回调逻辑后再执行赋值操作，避免查找元素时元素还未生成。

内容的提问来源于stack exchange，提问作者Denny callà