开发HTML5在线人格测试界面遇Cannot set properties of null错误求助

报错核心原因 #

Uncaught TypeError: Cannot set properties of null (setting 'innerText') 说明你在iterate函数里操作的question元素是null——要么JS代码执行过早，DOM还没渲染出目标元素；要么元素选择器和HTML中的元素标识不匹配。

具体修复步骤 #

1. 确保JS在DOM加载完成后执行 #

把你的JS代码放到HTML的</body>标签前，或者用DOM加载事件包裹所有逻辑：

document.addEventListener('DOMContentLoaded', function() {
  // 这里放置你的Questions数组、iterate函数、初始化调用等所有JS代码
});

2. 核对元素选择器 #

检查你获取question元素的代码，比如用document.getElementById('question')的话，HTML里必须存在对应的<div id="question"></div>，ID要完全一致（注意大小写区分）。

3. 修正随机题目排序逻辑 #

用Fisher-Yates洗牌算法实现无偏差的题目随机排序，避免索引越界问题：

function shuffleQuestions(arr) {
  let currentIndex = arr.length, randomIndex;
  while (currentIndex > 0) {
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex--;
    [arr[currentIndex], arr[randomIndex]] = [arr[randomIndex], arr[currentIndex]];
  }
  return arr;
}
// 初始化时打乱题目数组，用扩展运算符避免修改原数组
const shuffledQuestions = shuffleQuestions([...Questions]);

4. 添加调试代码定位问题 #

在iterate函数开头加入调试代码，确认元素和数据是否正常：

function iterate(id) {
  const question = document.getElementById('question');
  console.log('当前question元素:', question);
  console.log('当前题目数据:', shuffledQuestions[id]);
  // 原函数逻辑代码...
}

如果控制台输出question为null，回到步骤1、2排查；如果shuffledQuestions[id]为undefined，说明id超出了数组长度，需要检查id的递增逻辑是否正确。

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