为何出现Uncaught TypeError: Cannot read properties of null (reading 'innerHTML')错误？

错误原因 #

你遇到的Uncaught TypeError: Cannot read properties of null (reading 'innerHTML')，核心问题是document.querySelector('.datefromjs')未找到目标元素，返回了null，此时尝试访问null的innerHTML属性必然抛出异常。同时代码中还存在其他潜在问题：全局变量污染、数组删除逻辑漏洞、localStorage空值未处理等。

修复及优化后的代码 #

JavaScript代码

function removeFromTable(date) {
  // 声明变量并初始化，避免全局污染；localStorage无数据时默认空数组
  let datelist = JSON.parse(localStorage.getItem('date')) || [];
  let tableList = JSON.parse(localStorage.getItem('data')) || [];
  let ingredientslist = JSON.parse(localStorage.getItem('ing')) || [];

  // 使用filter安全删除指定日期，避免for循环+splice的索引错位问题
  datelist = datelist.filter(item => item !== date);

  // 删除对应日期的数据
  tableList.forEach(v => delete v[date]);
  ingredientslist.forEach(a => delete a[date]);

  // 过滤空对象，用filter避免索引错位问题
  const validTableData = tableList.filter(item => Object.keys(item).length > 0);
  // 同步过滤ingredientslist，保证两个数组索引对应
  const validIngredientsData = ingredientslist.filter((_, index) => Object.keys(tableList[index]).length > 0);

  // 更新localStorage
  localStorage.setItem('data', JSON.stringify(validTableData));
  localStorage.setItem('date', JSON.stringify(datelist));
  localStorage.setItem('ing', JSON.stringify(validIngredientsData));

  // 错误处理：先判断元素是否存在，再执行后续逻辑
  const dataElement = document.querySelector('.datafromjs');
  const shouldClearStorage = (!datelist.length && !validTableData.length) || 
                            (dataElement && dataElement.textContent.trim() === 'Create A Plan to display');
  
  if (shouldClearStorage) {
    localStorage.removeItem('date');
    localStorage.removeItem('data');
    localStorage.removeItem('ing');
  }

  location.reload();
}

HTML代码（无需修改）

<!DOCTYPE html>
<html lang="en">
<head>
  <title>PlanEatRepeat</title>
</head>
<body onload="addOptionsToPage()">
  <p style="text-align: center; font-size: large;">Your Meal Plan</p>
  <div class="datafromjs">
    <p style="text-align: center;">Create A Plan to display</p>
  </div>
  <script src="data2.js"></script>
</body>
</html>

关键修复点说明 #

• 变量声明与初始化：给所有变量添加let声明，避免全局变量污染；同时给localStorage.getItem的结果设置默认空数组，防止null引发后续数组操作错误。
• 数组删除逻辑优化：用filter替代for循环+splice，避免删除元素后数组索引错位导致的漏删问题，代码更简洁可靠。
• 错误处理逻辑修正：先获取目标元素并判断是否存在，再访问其内容；调整存储清空条件，直接使用内存中已处理的数组（而非重新读取localStorage），提升效率的同时避免逻辑错误。
• 修正内容判断逻辑：原代码中判断innerHTML == 'undefined'不符合实际逻辑，改为根据元素的默认文本判断内容状态，更贴合业务场景。

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