Count of boolean values

Asked

Viewed 43 times

2

I’m doing some Javascript exercises and I came across this problem, in counting boolean values. I converted the Nodelist into an Array to try to count the values by the method for(), filter() switch(), however, I only get the return of the value 0, and I would like to return the amount of true and false .

<body>
    <h1>Height and Sex</h1>
    <p>Type the height and sex: </p>

    <div>

        <input type="text" name="height" class="height" placeholder="Centimeter" minlength="3" maxlength="3">
        <input type="radio" name="op1" value="Man" class="sex"><label>Man</label>
        <input type="radio" name="op1" value="Woman" class="sex"><label>Woman</label>
        <br>

        <input type="text" name="height" class="height" placeholder="Centimeter" minlength="3" maxlength="3">
        <input type="radio" name="op2" value="Man" class="sex"><label>Man</label>
        <input type="radio" name="op2" value="Woman" class="sex"><label>Woman</label>
        <br>

        <input type="text" name="height" class="height" placeholder="Centimeter" minlength="3" maxlength="3">
        <input type="radio" name="op3" value="Man" class="sex"><label>Man</label>
        <input type="radio" name="op3" value="Woman" class="sex"><label>Woman</label>
        <br>

        <input type="text" name="height" class="height" placeholder="Centimeter" minlength="3" maxlength="3">
        <input type="radio" name="op4" value="Man" class="sex"><label>Man</label>
        <input type="radio" name="op4" value="Woman" class="sex"><label>Woman</label>
        <br>

        <input type="text" name="height" class="height" placeholder="Centimeter" minlength="3" maxlength="3">
        <input type="radio" name="op5" value="Man" class="sex"><label>Man</label>
        <input type="radio" name="op5" value="Woman" class="sex"><label>Woman</label>
    </div>
    <br>
    <button id="btn">Submit!</button>


    var sx = document.querySelectorAll(".sex");

    let sx_h = [sx[0].checked, sx[2].checked, sx[4].checked, sx[6].checked, sx[8].checked];
    let sx_m = [sx[1].checked, sx[3].checked, sx[5].checked, sx[7].checked, sx[9].checked];

    for(i = 0; sx_h.values == true; i++){
        return i
    }

    console.log(i)
javascript

2 answers

2


Despite NodeList not to be a Array, it is possible to iterate for NodeList using the method forEach().

//Instala o evento click para o botão cujo o id="btn". 
document.querySelector("#btn").addEventListener('click', (e) => {

  //Seleciona todos os elementos da classe "sex"
  var sx = document.querySelectorAll(".sex");

  let masc = 0; //inicializa contador.
  let femn = 0; //inicializa contador.
  
  //Para todos os checkboxs. 
  sx.forEach((item, index) => {

    //Verifica se é par 
    if (index % 2) {
      femn += item.checked ? 1 : 0; //Se for ímpar incrementa o número de mulheres.
    } else {
      masc += item.checked ? 1 : 0; //Se for par incrementa o número de homens.
    }

  });

  
  console.log(`${masc} homem(s) e ${femn} mulher(es).`)

});
<body>
  <h1>Height and Sex</h1>
  <p>Type the height and sex: </p>

  <div>

    <input type="text" name="height" class="height" placeholder="Centimeter" minlength="3" maxlength="3">
    <input type="radio" name="op1" value="Man" class="sex"><label>Man</label>
    <input type="radio" name="op1" value="Woman" class="sex"><label>Woman</label>
    <br>

    <input type="text" name="height" class="height" placeholder="Centimeter" minlength="3" maxlength="3">
    <input type="radio" name="op2" value="Man" class="sex"><label>Man</label>
    <input type="radio" name="op2" value="Woman" class="sex"><label>Woman</label>
    <br>

    <input type="text" name="height" class="height" placeholder="Centimeter" minlength="3" maxlength="3">
    <input type="radio" name="op3" value="Man" class="sex"><label>Man</label>
    <input type="radio" name="op3" value="Woman" class="sex"><label>Woman</label>
    <br>

    <input type="text" name="height" class="height" placeholder="Centimeter" minlength="3" maxlength="3">
    <input type="radio" name="op4" value="Man" class="sex"><label>Man</label>
    <input type="radio" name="op4" value="Woman" class="sex"><label>Woman</label>
    <br>

    <input type="text" name="height" class="height" placeholder="Centimeter" minlength="3" maxlength="3">
    <input type="radio" name="op5" value="Man" class="sex"><label>Man</label>
    <input type="radio" name="op5" value="Woman" class="sex"><label>Woman</label>
  </div>
  <br>
  <button id="btn">Submit!</button>

0

Another option is to make the comparisons by the values of each radio, is very similar to the answer of @Augusto Vasques but with some different peculiarities.

// selecionamos todos os inputs sex
            let radioSelector = document.querySelectorAll('.sex')
            
            // pegamos o evento de click e interagimos
            document.querySelector('#btn').onclick = e => { // a cada click no botão
                let man   = 0 // parametros de saída 
                let woman = 0 // parametros de saída 
                radioSelector.forEach(item => { // cada item do radio que teve mudança de valor
                    if(item.checked && item.value=="Man") { // comparação por value e checado
                        man++
                    }
                    if(item.checked && item.value=="Woman") {
                        woman++
                    }
                })
                console.log('Man ' + man, 'Woman ' + woman) // impressão console
            }
<body>
        <h1>Height and Sex</h1>
        <p>Type the height and sex: </p>

        <div>

            <input type="text" name="height" class="height" placeholder="Centimeter" minlength="3" maxlength="3">
            <input type="radio" name="op1" value="Man" class="sex"><label>Man</label>
            <input type="radio" name="op1" value="Woman" class="sex"><label>Woman</label>
            <br>

            <input type="text" name="height" class="height" placeholder="Centimeter" minlength="3" maxlength="3">
            <input type="radio" name="op2" value="Man" class="sex"><label>Man</label>
            <input type="radio" name="op2" value="Woman" class="sex"><label>Woman</label>
            <br>

            <input type="text" name="height" class="height" placeholder="Centimeter" minlength="3" maxlength="3">
            <input type="radio" name="op3" value="Man" class="sex"><label>Man</label>
            <input type="radio" name="op3" value="Woman" class="sex"><label>Woman</label>
            <br>

            <input type="text" name="height" class="height" placeholder="Centimeter" minlength="3" maxlength="3">
            <input type="radio" name="op4" value="Man" class="sex"><label>Man</label>
            <input type="radio" name="op4" value="Woman" class="sex"><label>Woman</label>
            <br>

            <input type="text" name="height" class="height" placeholder="Centimeter" minlength="3" maxlength="3">
            <input type="radio" name="op5" value="Man" class="sex"><label>Man</label>
            <input type="radio" name="op5" value="Woman" class="sex"><label>Woman</label>
        </div>
        <br>
        <button id="btn">Submit!</button>

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.