Uncaught TypeError: Cannot set property 'innerHTML' of null报错求助：代码逻辑看似正常却触发该错误的原因排查

嘿，我来帮你找出这个错误的根源！

问题出在哪？ #

你这段代码里的JavaScript是直接放在<head>标签里执行的，但浏览器是从上到下逐行解析HTML的——当代码运行到document.getElementById("test")这一行时，<body>里的<h1 id="test">元素还没被浏览器解析出来呢！这时候getElementById会返回null，你自然没法给null设置innerHTML属性，也就触发了你看到的这个TypeError。

另外，我还注意到页面里的按钮绑定了myinfo()函数，但你的代码里并没有定义这个函数，点击按钮的时候也会触发报错，这个小问题也可以顺便处理下~

几个简单的修复方案 #

你可以任选一种方法来解决：

方案1：把脚本移到<body>末尾 #

这是最简单的做法，把<script>标签放到</body>标签的前面，这样浏览器会先解析完所有页面元素，再执行JS代码，就能顺利找到#test元素了：

<!DOCTYPE html>
<html lang="eng">
<head>
<meta charset ="utf-8">
<meta name="" content="">
<title></title>
</head>
<body>
<button onclick="myinfo();">OK</button>
<h1 id="test">Ok</h1>
<script>
function myAgeInDays() {
"use strict";
var myAge = 15;
return myAge * 365;
}
var daysCalc = myAgeInDays();
document.getElementById("test").innerHTML = "Your Age In Days = "+ daysCalc+ " Day";

// 补上按钮需要的myinfo函数示例
function myinfo() {
  alert("按钮被点击啦！");
}
</script>
</body>
</html>

方案2：监听DOM加载完成事件 #

如果不想移动脚本的位置，可以把代码包裹在DOMContentLoaded事件回调里，等页面DOM完全加载完成后再执行代码：

<!DOCTYPE html>
<html lang="eng">
<head>
<meta charset ="utf-8">
<meta name="" content="">
<title></title>
<script>
document.addEventListener('DOMContentLoaded', function() {
  function myAgeInDays() {
    "use strict";
    var myAge = 15;
    return myAge * 365;
  }
  var daysCalc = myAgeInDays();
  document.getElementById("test").innerHTML = "Your Age In Days = "+ daysCalc+ " Day";

  // 补上按钮需要的myinfo函数
  function myinfo() {
    alert("按钮被点击啦！");
  }
});
</script>
</head>
<body>
<button onclick="myinfo();">OK</button>
<h1 id="test">Ok</h1>
</body>
</html>

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