JavaScript getElementById数字id传参报错 循环setTimeout延迟失效求助

你之前的认知是完全正确的：document.getElementById支持传入变量作为id参数，完全不需要逐行手写所有innerHTML拼接逻辑，当前报错的核心原因是循环边界计算错误：

• 你的循环设定为i从2开始，终止条件为i < 14，意味着循环执行到i=13时就会尝试找id为"13"的页面元素。但你明确说明页面上预先定义的id范围是"1"到"12"，id为"13"的元素不存在，因此getElementById返回null，读取null的innerHTML属性就会抛出类型错误。
• 修正方式：根据两个骰子点数和的实际范围（2到12），把循环终止条件改为i <= 12，也就是代码改成for (let i=2, j=0; i<=12; i++, j++)，避免访问不存在的id。如果你的统计逻辑需要覆盖id为"1"的元素，可以把循环起始值调整为i=1，同步修改j的起始值匹配naVals的索引即可。
• 额外调试建议：在报错行前加一行console.log(i, document.getElementById(i.toString()))，可以直接定位到具体是哪个id匹配失败，减少无意义排查。另外代码里定义的let id = i;属于未使用的冗余代码，可以直接删掉。
• 兼容提示：HTML规范虽允许纯数字开头的id，但如果遇到旧浏览器的兼容问题，可以给id加上统一前缀（比如dice-stats-2），减少潜在的边界异常。

当前基础循环无法实现延迟效果的核心原因是：JavaScript是单线程同步执行的，普通for循环会在几毫秒内把10次图片更新操作全部执行完毕，浏览器会直接跳过中间的渲染过程，最终只会显示最后一次更新的骰子图，根本不会出现逐次间隔更新的效果。
可以通过两种稳定的写法实现100ms间隔的轮播：

• 方案1：setTimeout嵌套实现（无定时器漂移问题，适合固定次数的短动画）

  const totalUpdateTimes = 10;
  let currentStep = 0;
  function updateDiceDisplay() {
    // 每次更新生成随机骰子值
    const int1 = Math.floor(Math.random() * 6) + 1;
    const int2 = Math.floor(Math.random() * 6) + 1;
    document.getElementById("image1").src = `images/dice${int1}.png`;
    document.getElementById("image2").src = `images/dice${int2}.png`;
    
    currentStep++;
    // 未达到总更新次数时，排定下一次更新
    if (currentStep < totalUpdateTimes) {
      setTimeout(updateDiceDisplay, 100);
    }
  }
  // 启动动画
  updateDiceDisplay();
  

• 方案2：async/await写法（代码逻辑更贴合原生循环的写法，可读性更高）

  // 封装一个延迟工具函数
  const sleep = (delayTime) => new Promise(resolve => setTimeout(resolve, delayTime));
  async function startDiceRollAnimation() {
    for (let i = 0; i < 10; i++) {
      const int1 = Math.floor(Math.random() * 6) + 1;
      const int2 = Math.floor(Math.random() * 6) + 1;
      document.getElementById("image1").src = `images/dice${int1}.png`;
      document.getElementById("image2").src = `images/dice${int2}.png`;
      // 挂起当前循环100ms，等待到时间再执行下一轮
      await sleep(100);
    }
  }
  // 启动动画
  startDiceRollAnimation();
  

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