(JS) Value returning null as a function

Question

I have a function that takes the id of two INPUT from the html and checks if it was filled or not. If it has been filled in, it executes the if script.

the function gets to execute the script and work, but it is returning an error in the console (Cannot read property 'value' of null). Error that I can't solve even though I have made several corrections.

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>

This is probably your issue: https://stackoverflow.com/questions/22790142/getelementbyid-returns-null-when-using-window-onload-but-not-when-run-from-cons You need to use `window.onload` — DemiPixel, Apr 08 '21 at 20:41
Your function runs before the HTML elements exist. Moving your script below them won't solve the issue completely though because it'll still run too early. You need to decide at which point you want to run the function (like while the user is typing, or when a button is pressed) and use `.addEventListener(....)` accordingly. — , Apr 08 '21 at 20:49

score 2 · Answer 1 · answered Apr 08 '21 at 20:57

2

Your script is executed before html is rendered. You should ether add defer attribute to your script or put your script on the bottom of body tag

answered Apr 08 '21 at 20:57

Serhiy Mamedov

1,080
5
11

score 0 · Answer 2 · answered Apr 08 '21 at 21:02

Just put your js after inputs..

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>

(JS) Value returning null as a function

2 Answers2