如何修复Uncaught TypeError: Can't read property 'addEventListener' of null及实现数独9×9表格渲染

1. 解决 Uncaught TypeError: Can't read property 'addEventListener' of null 报错 #

报错的核心原因是你调用addEventListener方法的DOM元素没有被成功获取，返回值为null，对应修复方案如下：

• 脚本加载顺序问题：JS代码放在DOM元素之前加载，浏览器解析到JS时对应元素还没渲染完成。可选两种修复方式：
  • 将JS代码放到</body>闭合标签之前，确保DOM全部加载完成后再执行逻辑
  • 将事件绑定逻辑包裹在DOMContentLoaded事件回调中，示例：

  document.addEventListener('DOMContentLoaded', function() {
    // 所有DOM操作、事件绑定逻辑都放在这里执行
    const easyBtn = document.getElementById('easy')
    // 后续业务逻辑
  })
  

• 元素ID拼写错误：检查getElementById的参数和HTML中按钮的id属性是否完全匹配，注意大小写敏感，不要多写空格或者拼写错误
• 元素被动态移除：如果是动态生成的元素，确保绑定事件时元素仍然存在于DOM树中

2. 点击id为easy的按钮渲染9×9数独表格实现方案 #

假设你已经准备好了easy难度对应的数独数组（用0代表空白待填格），实现步骤如下：

• 第一步：提前准备DOM结构

<!-- 数独表格渲染容器 -->
<div id="sudoku-container"></div>
<!-- 触发渲染的按钮 -->
<button id="easy">Easy难度</button>

• 第二步：编写数独渲染通用函数

function renderSudoku(sudokuData) {
  const container = document.getElementById('sudoku-container')
  // 清空容器内之前的内容
  container.innerHTML = ''
  const table = document.createElement('table')
  // 基础样式可根据需求自行修改
  table.style.borderCollapse = 'collapse'

  for (let row = 0; row < 9; row++) {
    const tr = document.createElement('tr')
    for (let col = 0; col < 9; col++) {
      const td = document.createElement('td')
      // 单元格基础样式
      td.style.width = '32px'
      td.style.height = '32px'
      td.style.textAlign = 'center'
      td.style.border = '1px solid #333'
      // 区分3×3宫格的边框样式（可选）
      if ((row + 1) % 3 === 0 && row !== 8) td.style.borderBottomWidth = '2px'
      if ((col + 1) % 3 === 0 && col !== 8) td.style.borderRightWidth = '2px'
      // 非0值显示数字，0值显示空白
      td.textContent = sudokuData[row][col] !== 0 ? sudokuData[row][col] : ''
      tr.appendChild(td)
    }
    table.appendChild(tr)
  }
  container.appendChild(table)
}

• 第三步：绑定按钮点击事件（需放在DOM加载完成的回调内）

document.addEventListener('DOMContentLoaded', function() {
  const easyBtn = document.getElementById('easy')
  // 前置判断元素是否存在，避免报错
  if (easyBtn) {
    easyBtn.addEventListener('click', function() {
      // 替换为你自己的easy难度对应数独数组即可
      const easySudokuArr = [
        [5,3,0,0,7,0,0,0,0],
        [6,0,0,1,9,5,0,0,0],
        [0,9,8,0,0,0,0,6,0],
        [8,0,0,0,6,0,0,0,3],
        [4,0,0,8,0,3,0,0,1],
        [7,0,0,0,2,0,0,0,6],
        [0,6,0,0,0,0,2,8,0],
        [0,0,0,4,1,9,0,0,5],
        [0,0,0,0,8,0,0,7,9]
      ]
      renderSudoku(easySudokuArr)
    })
  }
})

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