求助：Uncaught TypeError: Cannot set property 'innerHTML' of null错误解决

这个错误的核心原因其实很直白：当你的JavaScript代码执行时，页面上ID为abc的元素还没被浏览器加载完成，所以document.getElementById('abc')返回了null，自然没法设置它的innerHTML属性。而console.log(xyz.age)能正常输出，是因为这行代码只依赖sessionStorage里的数据，和DOM元素完全无关。

下面给你几个靠谱的解决办法：

• 把JS代码挪到页面底部
  把你的脚本放到</body>标签的上方，这样浏览器会先加载完所有DOM元素，再执行JS代码。示例如下：

  <body>
    <!-- 页面其他内容 -->
    <div id="abc"></div>
    <script>
      // 建议用const/let声明变量，避免全局污染
      const xyz = JSON.parse(sessionStorage.getItem("details"));
      document.getElementById('abc').innerHTML = xyz.age;
      console.log(xyz.age);
    </script>
  </body>
  

• 使用DOMContentLoaded事件监听
  如果脚本必须放在<head>里，那就让代码等待DOM加载完成后再执行，这是更规范的做法：

  document.addEventListener('DOMContentLoaded', function() {
    const xyz = JSON.parse(sessionStorage.getItem("details"));
    document.getElementById('abc').innerHTML = xyz.age;
    console.log(xyz.age);
  });
  

• 检查元素ID是否准确
  别忘了确认页面上确实存在ID为abc的元素，有没有拼写错误（比如大小写不一致，写成了Abc或ABC），这种小疏忽也常导致类似问题。

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