JS实现随机加法出题报Cannot set property innerHTML of null如何修复

调整div位置后仍触发null报错的核心问题 #

• 文档流被document.write()直接清空是最关键诱因
  页面脚本执行到非初始解析阶段时调用document.write()，会直接清空原文档流的全部内容，包括你提前放在script标签前的#div、#div2节点。后续点击「again」按钮通过getElementById查找#div2时，对应节点早已被清除，自然返回null值触发报错。
• HTML标签存在语法错误
  原代码中两个div标签均未书写闭合标签，浏览器解析DOM树时会自动错配节点结构，进一步提升了节点查找失败的概率。
• again()函数逻辑完全割裂
  原逻辑中again()仅将新生成的算式字符串单独拼到div2中，既没有同步更新校验用的全局随机数，也没有重新生成交互需要的输入框、按钮。即使不报null错，后续点击check按钮时，校验逻辑匹配的还是第一次生成的旧运算数，和新展示的算式完全不对应。

修复后可直接运行的完整代码 #

<html>
<body>
  <div id="div"></div>
  <div id="div2"></div>
  <div id="result"></div>

  <script>
    // 全局存储当前算式的两个运算数，供校验逻辑使用
    let currentRand1, currentRand2;

    // 封装统一生成新算式的逻辑
    function generateQuestion() {
      currentRand1 = Math.floor(Math.random() * 10);
      currentRand2 = Math.floor(Math.random() * 10);
      // 按交互顺序拼接内容：算式在前，输入框和按钮在后
      const questionContent = `
        ${currentRand1} + ${currentRand2} = 
        <input type='number' id='answerInput'>
        <button onclick='checkAnswer()'>check</button>
        <button onclick='generateQuestion()'>again</button>
      `;
      // 所有内容更新通过指定节点的innerHTML完成，彻底移除会清空文档的document.write调用
      document.getElementById('div').innerHTML = questionContent;
      // 清空上一次的校验结果
      document.getElementById('result').innerHTML = '';
    }

    // 校验答案的逻辑
    function checkAnswer() {
      const correctAnswer = currentRand1 + currentRand2;
      const userInput = document.getElementById('answerInput').value;
      const resultDom = document.getElementById('result');
      resultDom.innerHTML = Number(userInput) === correctAnswer ? '<br>correct!' : '<br>incorrect!';
    }

    // 页面加载完成后直接生成第一套算式
    generateQuestion();
  </script>
</body>
</html>

修复点说明 #

• 完全移除会破坏文档结构的document.write()调用，所有DOM操作都基于提前声明的固定节点完成，不会出现节点找不到的null报错
• 所有HTML标签补充了正确闭合结构，DOM树解析逻辑稳定
• 「again」按钮直接复用统一生成函数，每次点击都会同步更新当前运算数、生成新的交互元素，不存在校验逻辑和展示算式脱节的问题
• 校验结果输出到独立的结果区域，不会打乱原有页面的布局结构

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