JS input校验函数执行时报Cannot read 'value' of null错误如何解决？

Cannot read property 'value' of null本质是代码执行到访问.value属性的位置时，对应的DOM元素查找结果为null，不存在可读取的属性。这类报错存在迷惑性：哪怕业务逻辑最终能正常执行，也通常是DOM加载完成后由其他交互触发了函数的正常执行，掩盖了首次脚本执行时的空值错误。

• 脚本执行时机早于DOM渲染完成
  当前代码是脚本加载完成就直接调用progressBarPasta()，如果这段JS的加载位置在两个input元素、甚至是所有进度条元素的前面（比如放在HTML头部标签里），执行代码时浏览器还没解析到对应的DOM节点，document.getElementById就会返回null。
• 元素id不匹配
  使用ASP.NET的asp-for标签生成input时，部分场景下框架会自动给元素id拼接额外前缀，最终渲染到页面的真实id可能和代码里写的NumeroDaOcorrencia、NumeroDoProcesso不一致，导致查找失败。手写id时的拼写、大小写差异也会触发同类问题。
• 进度条元素本身未加载完成
  哪怕两个输入框能正常获取到，如果代码执行时几个barProgress*的进度条节点还没被渲染，在修改style.display时也会触发null属性访问的报错。

给所有DOM获取流程增加空值校验，同时把函数执行时机延后到DOM完全加载完成后，避免空指针访问。修复后的可直接运行的代码如下：

function progressBarPasta() {        
    const verInq2 = document.getElementById("NumeroDaOcorrencia");       
    const verInq5 = document.getElementById("NumeroDoProcesso");
 
    const progressBar0 = document.getElementById("barProgress0");
    const progressBar25 = document.getElementById("barProgress25");
    const progressBar50 = document.getElementById("barProgress50");
    const progressBar75 = document.getElementById("barProgress75");
    const progressBar100 = document.getElementById("barProgress100");

    // 先校验所有依赖的DOM节点都存在，缺失则直接终止逻辑，避免空值访问
    const requiredDomList = [verInq2, verInq5, progressBar0, progressBar25, progressBar50, progressBar75, progressBar100];
    if (requiredDomList.includes(null)) {
        return;
    }
 
    // 校验两个输入框都填写了非空内容，调整进度条状态
    if (verInq2.value.trim() && verInq5.value.trim()) {
        progressBar25.style.display = "block";
        progressBar0.style.display = "none";
        progressBar50.style.display = "none";
        progressBar75.style.display = "none";
        progressBar100.style.display = "none";
    }
}

// 绑定DOM渲染完成事件，等所有节点加载完再执行首次校验
document.addEventListener('DOMContentLoaded', progressBarPasta);
// 给输入框绑定实时输入事件，用户填写内容时自动触发状态更新
document.getElementById("NumeroDaOcorrencia")?.addEventListener('input', progressBarPasta);
document.getElementById("NumeroDoProcesso")?.addEventListener('input', progressBarPasta);

• 在浏览器控制台单独执行document.getElementById("NumeroDaOcorrencia")、document.getElementById("NumeroDoProcesso")，如果返回null，说明id不匹配或者节点还没加载。
• 用开发者工具的元素选择器点选对应的input，查看Elements面板里实际渲染的id属性，和代码里的id逐字符比对。

内容的提问来源于stack exchange，提问作者Mizrain Phelipe Sá