JS代码控制台运行正常，嵌入HTML后报TypeError错误求助

这个报错的核心原因其实很清晰：你的JavaScript代码在页面DOM元素还没加载完成时就提前执行了，导致document.getElementById("front")找不到目标元素，返回了null，自然就没法访问它的style属性了。而你在控制台手动运行代码时，页面DOM已经完全加载完毕，所以能正常生效。

下面给你几种实用的解决办法：

方法1：把脚本放在HTML文档末尾（最推荐） #

把你的<script>标签移到</body>标签的前方，这样浏览器执行JS代码时，页面上所有DOM元素都已经加载完成了：

<body>
  <!-- 页面其他内容 -->
  <div id="front"></div>
  <!-- 脚本放在此处 -->
  <script>
    var bigSize = [ "url('assets/bg/front1.jpg')", "url('assets/bg/front2.jpg')", ];
    var random = Math.floor(Math.random() * 2); // 这里+0可以省略，Math.floor已经返回整数
    document.getElementById("front").style.backgroundImage = bigSize[random];
  </script>
</body>

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

如果脚本必须放在<head>中，可以借助DOMContentLoaded事件，确保代码只在DOM完全就绪后执行：

document.addEventListener('DOMContentLoaded', function() {
  var bigSize = [ "url('assets/bg/front1.jpg')", "url('assets/bg/front2.jpg')", ];
  var random = Math.floor(Math.random() * 2);
  document.getElementById("front").style.backgroundImage = bigSize[random];
});

方法3：给script标签添加defer属性 #

在引入外部脚本的<script>标签上加上defer属性，浏览器会在DOM加载完成后再执行脚本，同时不会阻塞页面渲染：

<head>
  <script src="background.js" defer></script>
</head>

顺带提个小优化：Math.floor(Math.random() * 2)已经能返回0或1的随机整数了，后面的+0完全可以去掉，不影响逻辑结果。

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