Javascript || Do not display a block depending on the value of an array

Question

Good afternoon friends!

Let me explain my case better. In the code I attach, we have 6 inputs. The idea is that the block <p class="nome-plano">NEXT 60 ESPORTE</p> cannot be displayed if the value of one of these 6 inputs is greater than 65. See the code below:

const noSport = ()=> {
                let sportPlan = document.querySelectorAll('.nome-plano');
                if(sportPlan = "NEXT 60 ESPORTE") {
                    sportPlan.style.display = "none";
                }
            }

            document.addEventListener("DOMContentLoaded", ()=> {
                let paxAge = document.querySelectorAll(".idade-viajantes");
                for (i=0;i<paxAge.length;i++){
                    let paxAgeValue = paxAge[i].value;
                    let paxAgeNumber = parseInt(paxAgeValue);
                    if(paxAgeNumber[i]>65) {
                        noSport();
                    }
                }
            });

<label class="group"><span>Preencha abaixo a idade dos viajantes na data da viagem</span>
            <input name="idade" maxlength="2" class="idade-viajantes only-number" type="text" value="66">
            <input name="idade" maxlength="2" class="idade-viajantes only-number" type="text" value="">
            <input name="idade" maxlength="2" class="idade-viajantes only-number" type="text" value="">
            <input name="idade" maxlength="2" class="idade-viajantes only-number" type="text" value="">
            <input name="idade" maxlength="2" class="idade-viajantes only-number" type="text" value="">
        </label>

    <div>
        <div>
            <p class="nome-plano">NEXT 15</p>
            <p class="preco-plano">R$52</p>
        </div>

        <div>                          
            <p class="nome-plano">NEXT 60 ESPORTE</p>
            <p class="preco-plano">R$52</p>
        </div>
    </div>

I made a loop by going through each of the inputs and transforming its string values to integers.

My idea is that if one of the fields is an integer number greater than 65 we perform the function noSport() which should change the style of the widget to display: none;.

However it does not run, and the browser console is not giving me error... I also tried to run the function noSport as anonymity even opened within the conditional deviation, but not spun as well.

What am I sinning? Should I make another loop to check the individual array values if they are greater than 65? the way I’m riding the function noSport is wrong? Would a library like jQuery help me in this case? If anyone can give me strength I’d appreciate it!

Answer 1

Note that in your code, if is being done as if paxAgeNumber is an array (using the [i] to access an element), when in fact, on the top line, the variable is started with an integer value.

Therefore, the code should be as follows::

if(paxAgeNumber>65) {
    noSport();
}

Answer 2

Possible errors:

DOMContentLoaded may not be triggered because the DOM has already been loaded when Javascript runs. Workaround: Make sure the page is already loaded, and if not, add the Event Listener:

if (document.readyState === 'complete') start();
else document.addEventListener('DOMContentLoaded', start);

paxAgeNumber is a value, not an array, it makes no sense to access the position i to compare it, feathers compare own paxAgeNumber:

if(paxAgeNumber[i] > 65) {
    noSport();
}

sportPlan is an array, no if you treat it as a single variable. Not only that, but you assign the 'NEXT 60 SPORT' value to that array instead of making a comparison.

My suggestion:

function noSport () {
  let sportPlan = document.getElementById('next60esportes');
  sportPlan.style.display = 'none';
}

function start() {
  let paxAges = document.getElementsByClassName('idade-viajantes');
  
  for (let paxAge of paxAges) {
    let paxAgeValue = paxAge.value;
    let paxAgeNumber = parseInt(paxAgeValue);
    
    if (paxAgeNumber > 65) {
      noSport();
      break;
    }
    
  }
}

if (document.readyState === 'complete') start();
else document.addEventListener('DOMContentLoaded', start);

<label class="group"><span>Preencha abaixo a idade dos viajantes na data da viagem</span>
            <input name="idade" maxlength="2" class="idade-viajantes only-number" type="text" value="66">
            <input name="idade" maxlength="2" class="idade-viajantes only-number" type="text" value="">
            <input name="idade" maxlength="2" class="idade-viajantes only-number" type="text" value="">
            <input name="idade" maxlength="2" class="idade-viajantes only-number" type="text" value="">
            <input name="idade" maxlength="2" class="idade-viajantes only-number" type="text" value="">
        </label>

    <div>
        <div>
            <p class="nome-plano">NEXT 15</p>
            <p class="preco-plano">R$52</p>
        </div>

        <div>                          
            <p id="next60esportes" class="nome-plano">NEXT 60 ESPORTE</p>
            <p class="preco-plano">R$52</p>
        </div>
    </div>