2

Estou fazendo alguns exercícios de Javascript e deparei com esse problema, em fazer contagem de valores booleanos. Converti a NodeList em uma Array para tentar contar os valores pelo método for(), filter() switch(), porém, só consigo o retorno do valor 0, e gostaria de que voltasse a quantidade de true e 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)

2 Respostas 2

2

Apesar de NodeList não ser um Array, é possível iterar por NodeList usando o método 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

Outra opção é fazer os comparativos pelos values de cada radio, é bem similar a resposta do @Augusto Vasques mas com algumas peculiaridades diferentes.

// 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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .