JavaScript innerHTML赋值报null错误、世代计数器内容不更新问题

故障原因梳理 #

当前代码存在三处明确的逻辑偏差，直接触发了报错与计数不渲染的问题：

• DOM查询参数错误
  document.getElementById() 接收的参数是目标元素的原生id字符串，无需添加CSS选择器专属的#前缀。你传入的参数是"#counter-display"，方法会尝试查找id值为#counter-display的节点，找不到对应元素时返回null，自然会抛出cannot set property 'innerHTML' of null的错误。
  正确写法为传入纯id值"counter-display"，如果需要保留#前缀的写法，需要替换为document.querySelector("#counter-display")。
• 计数变量作用域错误
  你在evolve函数内部用let声明了evolutionNumber，这是仅在函数内部有效的局部变量。每次evolve被定时器触发执行时，这个变量都会被重置为0，根本无法跨函数调用累计世代数。
• 累加逻辑完全冗余
  你写的for (i = -1; i < evolutionNumber; i++) 循环设计完全偏离了计数意图：
  1. 循环启动时evolutionNumber初始值为0，循环条件会永远成立，进入无限自增的死循环
  2. 没有必要通过循环完成累加——每触发一次evolve就代表完成了一整轮世代迭代，只需要在每次函数执行时给全局存储的计数加1即可
  3. 循环内的变量i没有用let/const声明，会自动绑定为全局对象的属性，可能和其他业务逻辑的变量产生命名冲突。

修复后可参考的核心代码逻辑 #

将计数变量移到全局作用域，移除无效循环，修正DOM查询写法，调整后的核心逻辑为：

// 全局存储世代计数，跨函数调用保留累计值
let evolutionNumber = 0;

function evolve() {
  createNextGen();
  updateCurrGen();
  updateWorld();

  if (started) {
    // 每完成一轮演化，世代计数累加1
    evolutionNumber++;
    // 正确获取目标元素，更新显示内容
    document.getElementById("counter-display").textContent = evolutionNumber;
    timer = setTimeout(evolve, evolutionSpeed);
  }
}

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