JS运行报Cannot read properties of null (reading 'innerHTML')错误求助

报错根因 #

TypeError: Cannot read properties of null (reading 'innerHTML') 报错的本质是：document.getElementById("nam" + x) 执行后返回了null，你尝试读取null的innerHTML属性才触发错误，不存在对应id的DOM元素是核心诱因，常见触发场景和解决方法如下：

可能的触发场景&对应解决方案 #

• 场景1：JS执行时机早于DOM渲染完成
  如果你把脚本放在<head>标签内，或者放在对应DOM元素的上方加载，执行displayCart函数时，页面还没渲染出id为nam+x的元素，自然获取不到。
  解决方法：
  要么把script标签移动到页面</body>闭合标签的前面，确保所有DOM渲染完成后再加载执行JS；要么把displayCart的调用包裹在DOM加载完成的监听事件中，示例代码如下：

  document.addEventListener('DOMContentLoaded', function() {
    // 确保DOM加载完成后再执行逻辑
    displayCart(cart);
  })
  

• 场景2：id拼接结果和页面实际id不匹配
  你遍历cart对象拿到的x值拼接成nam+x后，和页面上实际写的元素id不一致，比如拼写错误多了字母、数字不匹配、大小写错误等都会导致找不到元素。
  解决方法：
  在循环内先打印拼接后的id值，和页面元素id做比对排查错误：

  for (var x in cart){
    // 打印拼接后的id，核对是否和页面一致
    console.log('当前查找的id为：', 'nam' + x)
    // 原有逻辑...
  }
  

• 场景3：for...in遍历拿到了预期外的key值
  for...in会遍历对象原型链上的所有可枚举属性，如果你给Object原型添加了自定义属性，遍历出来的x就可能包含你预期之外的值，拼接出来的id自然不存在。
  解决方法：
  遍历的时候先判断属性是否为对象自身的属性，同时获取元素后先判空再操作，避免报错，优化后的代码如下：

  function displayCart(cart) {
    var cartString = "";
    cartString +=  "<h5>This is your cart</h5>";
    var cartIndex = 1;
    for (var x in cart){
      // 过滤原型链上的属性
      if (!cart.hasOwnProperty(x)) continue
      const targetEle = document.getElementById("nam" + x)
      // 元素存在才执行后续操作
      if (targetEle) {
        cartString += cartIndex;
        console.log(targetEle.innerHTML +" | " + "Qty:" + cart[x] );
        cartString += targetEle.innerHTML +" | " + "Qty:" + cart[x] + "</br>" ;
        cartIndex +=1;
      } else {
        // 异常日志便于排查
        console.warn('未找到id为'+ "nam" + x +'的DOM元素')
      }
    }
  }
  

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