(Function) Check filled fields return previous action

Question

I have a function that checks whether the fields in my form have been filled or not picking by their value.

If certain fields have been filled in and an action appears on progress.

In this role I have 4 Ifs checking and adding a number of fields to see if it has been filled or not and then displays the corresponding progress.

The problem is whether the entire form has been completed by activating the If room and displaying the "progressBar100", if after that the value of the field "verInq1" the bar that appears instead of the "progressBar100" will be the "progressBar0" rather than being the "progressBar75". This happens in all Ifs.

So I wanted to do the reverse check also, in descending order where if the last If was not validated then it would return the third If and so on.

HTML of progressBar.

<div style="margin-bottom: 1.5em;">
    <div id="InqProgress0" class="progress barProgressAbas">
        <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
    <div id="InqProgress25" class="progress barProgressAbas ocultaProgressAbas">
        <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
    </div>
    <div id="InqProgress50" class="progress barProgressAbas ocultaProgressAbas">
        <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%</div>
    </div>
    <div id="InqProgress75" class="progress barProgressAbas ocultaProgressAbas">
        <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75%</div>
    </div>
    <div id="InqProgress100" class="progress barProgressAbas ocultaProgressAbas">
        <div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">100%</div>
    </div>
</div>

My JS to check the value and perform action.

function progressBarInq() {
            let progressBar0 = document.getElementById("InqProgress0");
            let progressBar25 = document.getElementById("InqProgress25");
            let progressBar50 = document.getElementById("InqProgress50");
            let progressBar75 = document.getElementById("InqProgress75");
            let progressBar100 = document.getElementById("InqProgress100");

            //25%
            let verInq1 = document.getElementById("InqueritoCircunscricaoPolicial");            
            //50%
            let verInq5 = document.getElementById("NumeroDoIP");            
            //75%
            let verInq8 = document.getElementById("DataDoRelatorio");                          
            //100%
            let verInq11 = document.getElementById("NumeroDoProcesso");                        

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

        }    

        progressBarInq();

Answer 1

You can simplify these selects... Also, to simplify html so that we can only handle width instead of display... So you can only have a progressibar.

<div style="margin-bottom: 1.5em;">
    <div id="InqProgress0" class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
</div>

// selecionado o progress bar 
var progress = document.querySelector('.progress-bar');

//suas variaveis
let verInq1 = document.getElementById("InqueritoCircunscricaoPolicial");            
let verInq5 = document.getElementById("NumeroDoIP");            
let verInq8 = document.getElementById("DataDoRelatorio");                          
let verInq11 = document.getElementById("NumeroDoProcesso");

//aqui temos a definição em valor do width
//traduzindo temos ->
// total = (tem verInq1? então ja vale 25) + (tem verInq5? então soma 25)..etc..
let total = (verInq1 ? 25 : 0) +  (verInq5 ? 25 : 0) + (verInq8 ? 25 : 0) + (verInq11 ? 25 : 0);
//são expressões ternárias, vale a pena estudar.

//e aqui temos nosso width sendo setado com template string
progress.style.width = `${total}%`;