javascript - 使用 javascript 验证单选按钮测验

Question

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

这是我的代码。

HTML

<h1 id="test_status"></h1>
<div id="test"></div>

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);

Answer 1

您可以使用如下所示回答的标志来检查用户是否已选择一个选项，codepen

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);

html -->

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