为何<script>在<div>后仍报TypeError: Cannot read properties of null错误？

问题根源很明确：你的hoverWord和resetWord函数里循环i从1到6，但页面上只有l1到l5这5个<span>元素，当i=6时，document.getElementById('l6')返回null，再去访问null的style属性就触发了报错。调整<script>的位置没用，是因为这根本不是DOM加载顺序的问题——不管script放哪儿，只要循环到6，就会去查找不存在的元素。

给你两个直接的解决办法：

• 修正循环范围：把循环的终止条件改成i<=5，比如原来的代码：

  for(let i = 1; i <= 6; i++) {
    // ...操作元素
  }
  

  改成：

  for(let i = 1; i <= 5; i++) {
    // ...操作元素
  }
  

  这样就只会遍历实际存在的5个元素，不会碰不存在的l6。

• 添加空值判断（更健壮）：如果不想改动循环范围（比如后续可能会加l6元素），可以在访问元素样式前先判断元素是否存在：

  for(let i = 1; i <= 6; i++) {
    const wordElem = document.getElementById(`l${i}`);
    if(wordElem) { // 先确认元素存在再操作
      wordElem.style.color = '#ff0000'; // 你的样式逻辑
    }
  }
  

  这样即使i=6时元素不存在，也只会跳过，不会触发报错。

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