Alerts the user that he did not choose a type=radio;

Question

Alerts the user that he did not choose a type=radio;

Asked 5 years, 5 months ago

Viewed 58 times

1

I’m having a problem not knowing how to identify if the user has selected an option type=radio.

Follows the code:

let nComputador = "";
let nJogador = "";
//let minhaEscolha = document.querySelector("input[type='radio']:checked").value;

function sortear(max) {
  return Math.floor(Math.random() * max);
};

let play = document.getElementById("jogar").addEventListener('click', function() {

  let minhaEscolha = document.querySelector("input[type='radio']:checked").value;

  if (minhaEscolha === null) {
    return alert("escolha uma opção!")
  }

  nJogador = parseFloat(document.querySelector("#meuNumero").value);

  nComputador = sortear(10);

  if (isNaN(nJogador)) {
    return alert("digite um numero");
  }

  let soma = ((nJogador + nComputador) % 2 === 0) ? "par" : "impar";
  let resultado = (soma == minhaEscolha) ? alert("ganhei") : alert("computador ganhou");

  console.log(nComputador, nJogador, minhaEscolha, soma);
});

<body>

  <h1>
    jogo do par ou impar
  </h1>
  <p>
    Digite um número de 0 a 10:
    <input type="number" id="meuNumero" min="0" max="10">
    <label><input type="radio" name="escolha" value="par">Par</label>
    <label><input type="radio" name="escolha" value="impar">Impar</label>
  </p>
  <button id="jogar">Jogar</button>
</body>

That one if shouldn’t work?

if (minhaEscolha === null) {
    return alert("escolha uma opção!")
}

1 answer

Browser other questions tagged javascript dom value

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

by hkotsubo • **55,826** points · Answer 1 · 2019-01-29T11:07:01+00:00

The problem is before the if (minhaEscolha === null), in this passage:

document.querySelector("input[type='radio']:checked").value

You’re looking for a radio marked (checked). But if none is marked, the querySelector finds nothing and returns null. And trying to catch the value of null, makes a mistake.

A solution is first to check whether the querySelector returned something, and only then catch the value:

let nComputador = "";
let nJogador = "";

function sortear(max) {
  return Math.floor(Math.random() * max);
};

let play = document.getElementById("jogar").addEventListener('click', function() {

  // verificar se algum radio foi marcado (não pega o value ainda)
  let minhaEscolha = document.querySelector("input[type='radio']:checked");

  if (!minhaEscolha) { // se nenhum radio foi marcado
    return alert("escolha uma opção!");
  }

  // pegar o valor do radio marcado
  minhaEscolha = minhaEscolha.value;

  nJogador = parseFloat(document.querySelector("#meuNumero").value);

  nComputador = sortear(10);

  if (isNaN(nJogador)) {
    return alert("digite um numero");
  }

  let soma = ((nJogador + nComputador) % 2 === 0) ? "par" : "impar";
  let resultado = (soma == minhaEscolha) ? alert("ganhei") : alert("computador ganhou");

  console.log(nComputador, nJogador, minhaEscolha, soma);
});

<body>

  <h1>
    jogo do par ou impar
  </h1>
  <p>
    Digite um número de 0 a 10:
    <input type="number" id="meuNumero" min="0" max="10">
    <label><input type="radio" name="escolha" value="par">Par</label>
    <label><input type="radio" name="escolha" value="impar">Impar</label>
  </p>
  <button id="jogar">Jogar</button>
</body>

You can also choose to use parseInt instead of parseFloat, since an even or odd game - as far as I know - only uses whole numbers.