Uncaught ReferenceError错误排查：输入添加学生名至页面功能失效

错误原因 #

你碰到的Uncaught ReferenceError: student is not defined是因为代码里定义的数组变量是students，但调用push方法时写成了student.push(SNNA1me)——少了末尾的s，导致JS找不到名为student的变量。

代码修正及优化 #

修正后的JavaScript代码 #

var students = [];

document
  .getElementById("add-student-btn")
  .addEventListener("click", function() {
    // 修正变量名拼写错误
    var studentName = document.getElementById("student-input").value;
    // 过滤空输入
    if (studentName.trim()) {
      // 使用正确的数组名students
      students.push(studentName);
      // 用换行分隔名字，优化显示效果
      document.getElementById("students").innerHTML = students.join('<br>');
      // 添加完清空输入框
      document.getElementById("student-input").value = '';
    }
  });

可直接使用的HTML代码 #

<div style="text-align: center; margin-top: 100px">
  <input type="text" id="student-input" placeholder="输入学生姓名" />
  <button id="add-student-btn">Submit</button>
  <div id="students" style="font-size: 30px; margin-top: 20px;"></div>
</div>

额外优化说明 #

• 修正了变量名SNNA1me的拼写错误，改为语义化的studentName
• 增加空输入校验，避免无效内容存入数组
• 用join('<br>')将数组转为换行展示的格式，更符合直观的列表显示需求
• 添加输入框清空逻辑，提升操作流畅度

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