JS操作对象数组打印数据异常 设置innerHTML时出现null报错问题

问题1：Cannot set properties of null (setting 'innerHTML')报错修复 #

原因 #

JS代码在ID为info的DOM节点渲染完成前就执行，document.getElementById("info")获取结果为null，赋值innerHTML时触发类型错误。

修复方法 #

可以二选一：

• 方案1：将所有JS代码移到HTML代码的</body>结束标签之前，保证DOM渲染完成后再执行JS
• 方案2：将最后操作innerHTML的代码包裹在DOM加载完成的事件回调中，参考代码如下：

document.addEventListener('DOMContentLoaded', function() {
  var infoprofesor ="Profesores<br>";
  for (let i = 0; i < profesores.length; i++) {
     infoprofesor = infoprofesor + profesores[i].nombre+"<br>";
  }
  document.getElementById("info").innerHTML = infoprofesor;
})

问题2：新增学生无法正常展示修复 #

关联bug说明 #

1. 插入学生时教师引用错误：创建新学生实例时，错误使用了字符串变量profesor[i]，应该使用教师数组profesores[i]，否则存储的教师字段不是教师对象，后续展示时无法获取nombre属性
2. 学生查询逻辑错误：未找到学生的判断写在循环内部，会重复输出错误提示，需要移到循环外部
3. 所有document.write调用会清空整个页面原有DOM，导致按钮、info容器都被删除，后续操作失效，需要统一改为操作info容器的innerHTML
4. 变量名冲突：insertar函数内定义的profesor变量和教师构造函数重名，容易引发逻辑混乱

修复后完整代码 #

HTML代码

<button onclick="infoalumno()">Informacion del alumno</button>
<button onclick="insertar()">Introducir nuevo alumno</button>
<div id="info"></div>
<script>
// 修复后的JS代码
function alumno(nombre, edad, nota, profesor) {
    this.nombre = nombre;
    this.edad = edad;
    this.nota = nota;
    this.profesor = profesor;
}
function profesor(nombre, asginatura) {
    this.nombre = nombre;
    this.asginatura = asginatura;
}
var profesores = new Array(3);
profesores[0] = new profesor("Paco","Plastica");
profesores[1] = new profesor("Anton","Biologia");
profesores[2] = new profesor("Jacinto","Lengua");
var alumnos = new Array(2);
alumnos[0] = new alumno("Jose",24,7,profesores[0]);
alumnos[1] = new alumno("Jacobo",23,7,profesores[2]);
function infoalumno() {
    var buscar = prompt("Inserta el nombre del alumno que quieres buscar");
    var comprobar = false
    var content = ""
    for (let i = 0; i < alumnos.length; i++) {
        if (buscar == alumnos[i].nombre) {
            content = "Nombre：" + alumnos[i].nombre + "<br>Edad：" + alumnos[i].edad + "<br>Nota：" + alumnos[i].nota + "<br>Profesor：" + alumnos[i].profesor.nombre;
            comprobar = true;
            break;
        }
    }
    if (comprobar == false) {
        content = "Alumno " + buscar + " 不存在";
    }
    document.getElementById("info").innerHTML = content;
}
function insertar() {
    var comprobar2 = false;
    var nombre = prompt("Insertar el nombre del alumno");
    var edad = parseInt(prompt("Ingresa la edad"));
    var nota = parseInt(prompt("Ingresa la nota"));
    var profesorInput = prompt("¿Quien es el profesor?");
    for (let i = 0; i < profesores.length; i++) {
        if (profesorInput == profesores[i].nombre) {
            var newalumno = new alumno(nombre, edad, nota, profesores[i]);
            alumnos.push(newalumno);
            comprobar2=true;
            break;
        }
    }
    var content = ""
    if(comprobar2==false){
        content = "Profesor "+profesorInput+" 不存在";
    }else{
        content = "学生 "+nombre+" 新增成功";
    }
    document.getElementById("info").innerHTML = content;
}
document.addEventListener('DOMContentLoaded', function() {
    var infoprofesor ="Profesores<br>";
    for (let i = 0; i < profesores.length; i++) {
       infoprofesor = infoprofesor + profesores[i].nombre+"<br>";
    }
    document.getElementById("info").innerHTML = infoprofesor;
})
</script>

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