任务4报错：.checked与.value未正常生效，学生数据存储展示功能异常

核心问题根因 #

经过排查代码，故障由以下几个错误导致：

• DOM取值时机错误：输入框、复选框的取值逻辑写在页面初始化阶段，此时没有用户输入内容，后续点击按钮时读取的还是初始空值，无法获取用户最新输入
• 复选框属性使用错误：误将.value用于获取复选框选中状态，复选框的选中状态需要通过布尔类型的.checked属性读取
• 渲染触发逻辑错误：学生列表遍历渲染的代码仅在页面加载时执行一次，后续数组新增数据后不会重新触发渲染，页面内容不会更新

具体修复步骤 #

1. 将输入框、复选框的取值代码迁移到按钮点击事件的回调函数内部，确保每次点击按钮时都能获取到用户最新输入的内容
2. 修正复选框取值代码，将原来获取.value的逻辑替换为读取.checked属性
3. 将学生列表渲染逻辑封装为独立函数，每次往数组中push新的student对象后，调用该函数刷新页面展示内容

正确代码示例 #

// 存储学生数据的数组
const studentList = []
// 绑定页面DOM元素
const addBtn = document.querySelector('#add-student-btn')
const nameInput = document.querySelector('#student-name-input')
const graduateCheckbox = document.querySelector('#is-graduated-checkbox')
const listContainer = document.querySelector('#student-list-container')

// 封装列表渲染逻辑
function renderList() {
  // 清空原有列表避免重复渲染
  listContainer.innerHTML = ''
  // 遍历数组生成学生列表项
  studentList.forEach(student => {
    const item = document.createElement('div')
    item.textContent = student.name
    listContainer.appendChild(item)
  })
}

addBtn.addEventListener('click', function() {
  // 点击时读取用户最新输入/选择状态
  const currentName = nameInput.value.trim()
  // 简单校验非空避免提交空数据
  if (!currentName) return
  const currentGraduateStatus = graduateCheckbox.checked
  // 组装student对象
  const newStudent = {
    name: currentName,
    isGraduated: currentGraduateStatus
  }
  // 推入存储数组
  studentList.push(newStudent)
  // 触发渲染更新页面展示
  renderList()
  // 可选：清空输入框内容方便下次输入
  nameInput.value = ''
  graduateCheckbox.checked = false
})

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