Javascript Feedback de questão JavaScript ( Dier se está certo ou errada)

[Daniel Inácio]

O código mostra todas corretas ou todas erradas. Alguém dá uma luz, sou muito novato em JS, desde já, obrigado.

<h1>Questionário</h1>
        <ol type="1">
            <li>Q1</li>
            <input type="radio" name="radio" value="errado" id="r">R1
            <input type="radio" name="radio" value="certo" id="r">R2
            <input type="radio" name="radio" value="errado" id="r">R3
            <input type="radio" name="radio" value="errado" id="r">R4
            <input type="radio" name="radio" value="errado" id="r">R5

            <input type="submit" name="submit" value="submit" onclick="funcao();">
        </ol>

        <script>
            function funcao(){
                var out = document.getElementById("r").value;
                if(out == "certo"){
                    window.alert(out);
                } else {
                    window.alert("Opção incorreta");
                }
                
            }
            
        </script>

 

[Ansi C]

É porque identificação deve ser única, você poderia identificar cada input radio sequencialmente de 'r1' até 'r5' também, depois usar um loop para resgatar o valor em cada um deles, ou escrever a verificação um a um que também é bom.

[Rui Guilherme]

Você não precisa fazer exatamente usando um for, usar o for nesse caso é considerado uma má prática, o ideal é usar o querySelector:

 

HTML:

<h1>Questionário</h1>
<ol type="1">
  <li>Q1</li>
  <input type="radio" name="radio" value="errado" />R1
  <input type="radio" name="radio" value="certo" />R2
  <input type="radio" name="radio" value="errado" />R3
  <input type="radio" name="radio" value="errado" />R4
  <input type="radio" name="radio" value="errado" />R5

  <input type="submit" name="submit" value="submit" onclick="funcao();" />
</ol>

 

JavaScript:

function funcao(){
  // querySelector retorna null quando nenhuma é selecionada, o operador "??" é um operador de nulabilidade
  // Recomendo essa leitura caso desconheça o operador:
  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator
  const selecionado = document.querySelector('input[name="radio"]:checked') ?? false;

  if (!selecionado) {
    alert("Você não selecionou nenhuma")
  } else if(selecionado.value === "certo"){
    alert(selecionado.value);
  } else {
    alert("Opção incorreta");
  }
}

Caso você queira ver funcionando em tempo real: https://codepen.io/ruiguilherme/pen/vYxReaP?editors=1010