JS getElementById获取元素为null设置innerHTML报错如何解决

报错根因 #

出现Cannot set properties of null错误的核心原因是DOM元素获取失败，具体问题点有两个：

1. HTML中id属性的PHP输出写法不规范，没有给属性值加引号，存在属性解析风险
2. JS调用getElementById时传入的参数错误：把id=progressX整个内容写进了参数位置，且没有给字符串加引号，JS会将其识别为变量表达式而非id字符串，最终查询DOM返回null，自然无法设置innerHTML和样式属性

另外原有代码还存在三个逻辑问题：

• 进度条初始样式写死了width:100%，和从0开始增长的进度逻辑冲突
• 用setInterval创建的定时器错误使用clearTimeout清除，存在兼容性风险
• 进度计算多了冗余的+1，容易出现最后停在99%的问题
• 每次定时器触发都重复查询DOM，存在不必要的性能损耗

修复后代码 #

HTML部分 #

<div>
  <div 
    class="progress-bar progress-bar-striped progress-bar-animated" 
    id="progress<?php echo $row[0]; ?>" 
    role="progressbar" 
    aria-valuemin="0" 
    aria-valuemax="100" 
    style="width: 0%"
  > 
  </div>
</div>

Javascript部分 #

let progress = 0;
// 提前缓存DOM元素，避免重复查询
const progressBar = document.getElementById("progress<?php echo $row[0]; ?>");

const counterBack = setInterval(function(){
    progress++;
    if(progress < 100){
      progressBar.style.width = `${progress}%`;
      progressBar.innerHTML = `${progress}%`;
    } else {
      // 补全100%状态，避免进度卡在99%
      progressBar.style.width = "100%";
      progressBar.innerHTML = "100%";
      // 用对应clearInterval清除setInterval创建的定时器
      clearInterval(counterBack);
    }
}, 1000);

注意事项 #

• 如果你的JS代码写在独立的.js文件中，PHP语法不会被服务器解析，这种场景可以在HTML中用data-progress-id属性存储id值，JS读取该属性获取元素即可
• 确保JS代码执行时，对应的进度条DOM已经渲染完成：如果JS写在<head>里，需要把逻辑放在DOMContentLoaded事件回调中，或者把JS脚本放在页面底部、进度条DOM的后方

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