forEach循环内绑定onclick调用displayGrades报innerHTML为null错误

错误根本原因 #

• onclick绑定逻辑错误：当前写法会在模板字符串渲染阶段直接执行displayGrades函数，此时生成的grades_detail元素还没有插入到页面DOM树中，document.getElementById("grades_detail")只能返回null，对null赋值innerHTML就会触发该报错
• id重复冲突：forEach循环内每个学生的详情容器都用了相同的id="grades_detail"，不符合HTML id全局唯一的规范，就算元素正常插入，后续也只能匹配到第一个符合id的元素，无法对应当前点击的学生成绩区域
• DOM未挂载：示例代码中只定义了htmlGrade、htmlSegment2两个HTML字符串，没有执行插入页面DOM的操作，对应元素始终不存在，自然无法被选中

修复方案 #

第一步：修改循环内代码 #

// 遍历的时候加index参数，用来生成唯一id
S_user.students.forEach((student, index) => {
  // 生成每个学生独有的详情容器id
  const uniqueDetailId = `grades_detail_${index}`;
  let htmlGrade = `<div id="${uniqueDetailId}"></div>`;
  // 修正onclick写法，仅在点击时触发函数，同时传入成绩数组和对应容器id
  let htmlSegment2 =  `<div class="others">Average&nbsp;Grade:&nbsp;${average(student.grades)}</a>&nbsp;&nbsp;&nbsp;&nbsp;
  <button type="button" onclick="displayGrades(${JSON.stringify(student.grades)}, '${uniqueDetailId}')"> + </button></div>
  <br />`;
  // 此处将生成的HTML插入到你页面中实际存在的容器内，示例用id为student_list的容器，可替换为你自己的容器id
  document.getElementById('student_list').innerHTML += htmlGrade + htmlSegment2;
})

第二步：修改displayGrades函数 #

// 新增第二个参数接收对应容器的唯一id
function displayGrades(lis, detailId){
    let html1 = '';
    const len = lis.length;
    for (let i = 0; i < len; i++) {
        html1 += 'Test' + (i+1) + ':&nbsp;' + lis[i] + '%<br/>';
    }
    // 查找对应学生的详情容器赋值
    document.getElementById(detailId).innerHTML = html1;
}

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