使用javascript验证单选按钮测验

我试图在我做的这个小测验中添加验证，但我似乎无法使它正常工作。这就是我想要的。。。如果没有选中任何单选按钮，并且用户正试图继续下一个问题，则在继续下一个问题之前提醒用户选择答案。我尝试在checkAnswer函数中添加If语句，但由于某些原因，它只适用于第一个问题，不想在用户选择答案后转到下一个问题。PS我是JavaScript新手，所以请对我放松：）

这是我的密码

HTML

JavaScript

var test = document.getElementById('test');
var test_status = document.getElementById('test_status');
var pos = 0;
var correct = 0;
var question;
var choices;
var choice;
var chA, chB, chC, chD;

var questions = [
  ['What is 1+1?', '4', '7', '2', '9', 'C'],
  ['What is 1+2?', '2', '3', '4', '6', 'B'],
  ['What is 1+3?', '4', '2', '6', '7', 'A'],
  ['What is 1+4?', '9', '7', '2', '5', 'D']
];

function renderQuestion(){
  test_status.innerHTML = 'Question ' + (pos+1) + ' of ' + questions.length;

  if(pos >= questions.length){
     test_status.innerHTML = 'Test Completed';
     test.innerHTML = '<h2>You got ' + correct + ' out of ' + questions.length + ' questions correct </h2>';
    return false;
   }

  question = questions[pos][0];
  chA = questions[pos][1];
  chB = questions[pos][2];
  chC = questions[pos][3];
  chD = questions[pos][4];

  test.innerHTML = '<h2>' + question + '</h2>';
  test.innerHTML += '<input type="radio" name="choices" value="A">' + chA + '<br>';
  test.innerHTML += '<input type="radio" name="choices" value="B">' + chB + '<br>';
  test.innerHTML += '<input type="radio" name="choices" value="C">' + chC + '<br>';
  test.innerHTML += '<input type="radio" name="choices" value="D">' + chD + '<br>';
  test.innerHTML += '<button onclick="checkAnswer()"> Check Answer </button>';
}

function checkAnswer(){
  choices = document.getElementsByName('choices');
  for(var i = 0; i < choices.length; i++){
    if(choices[i].checked){
       choice = choices[i].value;
    }
  }

  if(choice === questions[pos][5]){
     correct++;  
    console.log(correct);
  }

  pos++;
  renderQuestion();
}

window.addEventListener('load', renderQuestion, false);

var test=document.getElementById（'test'）；
var test_status=document.getElementById（“test_status”）；
var-pos=0；
var=0；
var问题；
var选择；
var选择；
var-chA，chB，chC，chD；
变量问题=[
[1+1是什么？，'4'，'7'，'2'，'9'，'C']，
什么是1+2？，“2”，“3”，“4”，“6”，“B”，
[“什么是1+3？”、“4”、“2”、“6”、“7”、“A”]，
什么是1+4？，'9'，'7'，'2'，'5'，'D']
];
函数renderQuestion（）{
test_status.innerHTML='Question'+（pos+1）+'of'+questions.length；
如果（位置>=问题长度）{
test_status.innerHTML='testcompleted'；
test.innerHTML='You get'+correct+'out'+questions.length+'questions correct'；
返回false；
}
问题=问题[pos][0]；
chA=问题[pos][1]；
chB=问题[pos][2]；
chC=问题[pos][3]；
chD=问题[pos][4]；
test.innerHTML=''+问题+''；
test.innerHTML+=''+chA+'
'；
test.innerHTML+=''+chB+'
'；
test.innerHTML+=''+chC+'
'；
test.innerHTML+=''+chD+'
'；
test.innerHTML+=“检查答案”；
}
函数checkAnswer（）{
choices=document.getElementsByName（'choices'）；
for（var i=0；i

您的情况仅检查答案是否正确，然后写入控制台。无论提供（或省略）的答案是什么，都会运行将用户推进到下一个问题的代码

每次运行

checkAnswer

时，您都需要重置

choice

，并且需要添加一个条件来检查有效的

选项

function checkAnswer(){
  choice = null;
  choices = document.getElementsByName('choices');
  for(var i = 0; i < choices.length; i++){
    if(choices[i].checked){
       choice = choices[i].value;
    }
  }

  if( !choice ){
    return console.error('select an answer.');
  }


  if(choice === questions[pos][5]){
     correct++;  
    console.log(correct);
  }

  pos++;
  renderQuestion();
}

函数checkAnswer（）{
choice=null；
choices=document.getElementsByName（'choices'）；
for（var i=0；i

您只检查了

已检查的

，您需要

返回如果未选中单选按钮。
更新的
您可以使用下面回答的标志检查用户是否选择了选项

var test=document.getElementById（'test'）；
var test_status=document.getElementById（“test_status”）；
var-pos=0；
var=0；
var问题；
var选择；
var选择；
var-chA，chB，chC，chD；
变量问题=[
[1+1是什么？，'4'，'7'，'2'，'9'，'C']，
什么是1+2？，“2”，“3”，“4”，“6”，“B”，
[“什么是1+3？”、“4”、“2”、“6”、“7”、“A”]，
什么是1+4？，'9'，'7'，'2'，'5'，'D']
];
函数renderQuestion（）{
document.getElementById（'error'）.style.display='none'；
test_status.innerHTML='Question'+（pos+1）+'of'+questions.length；
如果（位置>=问题长度）{
test_status.innerHTML='testcompleted'；
test.innerHTML='You get'+correct+'out'+questions.length+'questions correct'；
返回false；
}
问题=问题[pos][0]；
chA=问题[pos][1]；
chB=问题[pos][2]；
chC=问题[pos][3]；
chD=问题[pos][4]；
test.innerHTML=''+问题+''；
test.innerHTML+=''+chA+'
'；
test.innerHTML+=''+chB+'
'；
test.innerHTML+=''+chC+'
'；
test.innerHTML+=''+chD+'
'；
test.innerHTML+=“检查答案”；
}
函数checkAnswer（）{
var=false；
choices=document.getElementsByName（'choices'）；
for（var i=0；i

html-->


请选择一个ans继续
Oh sry，也就是在执行时检查值，代码在特定代码行暂停，此时您可以看到它的值。如果我的答案对您有帮助，您是否可以向上投票并接受我的答案。
function checkAnswer(){
  choice = null;
  choices = document.getElementsByName('choices');
  for(var i = 0; i < choices.length; i++){
    if(choices[i].checked){
       choice = choices[i].value;
    }
  }

  if( !choice ){
    return console.error('select an answer.');
  }


  if(choice === questions[pos][5]){
     correct++;  
    console.log(correct);
  }

  pos++;
  renderQuestion();
}

var test = document.getElementById('test');
    var test_status = document.getElementById('test_status');
    var pos = 0;
    var correct = 0;
    var question;
    var choices;
    var choice;
    var chA, chB, chC, chD;


    var questions = [
      ['What is 1+1?', '4', '7', '2', '9', 'C'],
      ['What is 1+2?', '2', '3', '4', '6', 'B'],
      ['What is 1+3?', '4', '2', '6', '7', 'A'],
      ['What is 1+4?', '9', '7', '2', '5', 'D']
    ];

    function renderQuestion(){
      document.getElementById('error').style.display = 'none';
      test_status.innerHTML = 'Question ' + (pos+1) + ' of ' + questions.length;

      if(pos >= questions.length){
         test_status.innerHTML = 'Test Completed';
         test.innerHTML = '<h2>You got ' + correct + ' out of ' + questions.length + ' questions correct </h2>';
        return false;
       }

      question = questions[pos][0];
      chA = questions[pos][1];
      chB = questions[pos][2];
      chC = questions[pos][3];
      chD = questions[pos][4];

      test.innerHTML = '<h2>' + question + '</h2>';
      test.innerHTML += '<input type="radio" name="choices" value="A">' + chA + '<br>';
      test.innerHTML += '<input type="radio" name="choices" value="B">' + chB + '<br>';
      test.innerHTML += '<input type="radio" name="choices" value="C">' + chC + '<br>';
      test.innerHTML += '<input type="radio" name="choices" value="D">' + chD + '<br>';
      test.innerHTML += '<button onclick="checkAnswer()"> Check Answer </button>';
    }

    function checkAnswer(){
      var answered = false;
      choices = document.getElementsByName('choices');
      for(var i = 0; i < choices.length; i++){
        if(choices[i].checked){
           answered = true;
           choice = choices[i].value;
        }
      }
      if(!answered) {
        document.getElementById('error').style.display = 'block';

    }
      else {
        if(choice === questions[pos][5]){
         correct++;  
        console.log(correct);
      }

      pos++;
      renderQuestion();
      }
      }


    window.addEventListener('load', renderQuestion, false);

<h1 id="test_status"></h1>
<div id="test"></div>
<p id="error">Please select an ans to continue</p>