（JS）作为函数返回null的值[重复]答案

【问题标题】：(JS) Value returning null as a function [duplicate]（JS）作为函数返回null的值[重复]
【发布时间】：2021-04-08 20:38:31
【问题描述】：

我有一个函数，它从 html 中获取两个 INPUT 的 id 并检查它是否已填充。如果已填写，则执行if脚本。

该函数开始执行脚本并开始工作，但它在控制台中返回错误（无法读取 null 的属性“值”）。即使我进行了多次更正也无法解决的错误。

function progressBarPasta() {        
    let verInq2 = document.getElementById("NumeroDaOcorrencia");       
    let verInq5 = document.getElementById("NumeroDoProcesso");
 
    let progressBar0 = document.getElementById("barProgress0");
    let progressBar25 = document.getElementById("barProgress25");
    let progressBar50 = document.getElementById("barProgress50");
    let progressBar75 = document.getElementById("barProgress75");
    let progressBar100 = document.getElementById("barProgress100");
 
    if (verInq2.value && verInq5.value) {
        progressBar25.style.display = "block";
        progressBar0.style.display = "none";
        progressBar50.style.display = "none";
        progressBar75.style.display = "none";
        progressBar100.style.display = "none";
    }
          
}

progressBarPasta();

<div class="form-group pmd-textfield col-sm-3">
                    <label for="NumeroDaOcorrencia" class="control-label cssPerguntas espacamentoLabels">
                        <strong>1.3</strong> Número da ocorrência
                    </label>
                    <input class="form-control" id="NumeroDaOcorrencia" maxlength="1000" placeholder="N° da ocorrência"
                           asp-for="InqueritoModel.NumeroDaOcorrencia"
                           type="text">
                </div>
                

<div class="form-group pmd-textfield col-sm-4">
                    <label for="NumeroDoProcesso" class="control-label cssPerguntas espacamentoLabels">
                        <strong>1.13</strong> Número do processo
                    </label>
                    <input class="form-control" id="NumeroDoProcesso" placeholder="Nº do processo" maxlength="1000"
                           asp-for="ProcessoModel.NumeroDoProcesso"
                           type="text">
                </div>

【问题讨论】：

这可能是你的问题：stackoverflow.com/questions/22790142/…你需要使用window.onload
您的函数在 HTML 元素存在之前运行。将脚本移到它们下面并不能完全解决问题，因为它仍然会运行得太早。您需要决定在什么时候运行该功能（例如在用户键入时，或在按下按钮时）并相应地使用.addEventListener(....)。
@DemiPixel 谢谢！

标签： javascript html null return-value verification

【解决方案1】：

您的脚本在呈现 html 之前执行。您应该将defer 属性添加到您的脚本或将您的脚本放在body 标签的底部

【讨论】：

【解决方案2】：

只需将你的 js 放在输入之后..

function progressBarPasta() {        
    let verInq2 = document.getElementById("NumeroDaOcorrencia");       
    let verInq5 = document.getElementById("NumeroDoProcesso");
 


    let progressBar0 = document.getElementById("barProgress0");
    let progressBar25 = document.getElementById("barProgress25");
    let progressBar50 = document.getElementById("barProgress50");
    let progressBar75 = document.getElementById("barProgress75");
    let progressBar100 = document.getElementById("barProgress100");
    

    if (verInq2.value && verInq5.value) {
        progressBar25.style.display = "block";
        progressBar0.style.display = "none";
        progressBar50.style.display = "none";
        progressBar75.style.display = "none";
        progressBar100.style.display = "none";
    }
          
}
progressBarPasta();

<div class="form-group pmd-textfield col-sm-3">
                    <label for="NumeroDaOcorrencia" class="control-label cssPerguntas espacamentoLabels">
                        <strong>1.3</strong> Número da ocorrência
                    </label>
                    <input class="form-control" id="NumeroDaOcorrencia" value="" maxlength="1000" placeholder="N° da ocorrência"
                           asp-for="InqueritoModel.NumeroDaOcorrencia"
                           type="text">
                </div>
                

<div class="form-group pmd-textfield col-sm-4">
                    <label for="NumeroDoProcesso" class="control-label cssPerguntas espacamentoLabels">
                        <strong>1.13</strong> Número do processo
                    </label>
                    <input class="form-control" id="NumeroDoProcesso" value="" placeholder="Nº do processo" maxlength="1000"
                           asp-for="ProcessoModel.NumeroDoProcesso"
                           type="text">
                </div>

【讨论】：