如何檢查我的單選按鈕是否已選中並且循環正常工作？

Question

因此，我正在嘗試制作一個quiz.html文件，該文件將提示用戶輸入否。 他們想回答的問題。 根據他們的輸入，將生成隨機問題。 所以我知道這將是一個循環，直到沒有循環。 輸入到警報框中。 所以我的scoreMe（）函數顯然沒有給出任何答案。 我正在嘗試檢查特定問題的選中單選按鈕是否等於正確答案，但我的分數僅為0％。 那么誰能告訴我我的代碼出了什么問題？

    <div id="quesRes"></div>



<script>

    var quizObj = [
    { 
        "question": "What is the capital of Bangladesh?",
        "choice": ["Dhaka", "Chittagong", "Sylhet"],
        "correct": ["Dhaka"]
   },
   { 
        "question": "What does 2+2 equal to?",
        "choice": ["3", "2", "4"],  //quizObj[2].choice[0],quizObj[2].choice[1]
        "correct": ["4"]
   },
    { 
        "question": "What is the real name of Damon Salvatore?",
        "choice": ["Paul Wesley", "Steven McQueen", "Ian Somerhalder"],  //quizObj[2].choice[0],quizObj[2].choice[1]
        "correct": ["Ian Somerhalder"]
   },
    { 
        "question": "What is the name of the largest planet in the universe?",
        "choice": ["Earth", "Jupiter", "Uranus"],  //quizObj[2].choice[0],quizObj[2].choice[1]
        "correct": ["Jupiter"]
   },
    { 
        "question": "What is the capital of New York?",
        "choice": ["Manhattan", "NYC", "Albany"],  //quizObj[2].choice[0],quizObj[2].choice[1]
        "correct": ["Albany"]
   },
    { 
        "question": "How many bones does the human body have?",
        "choice": ["109", "206", "114"],  //quizObj[2].choice[0],quizObj[2].choice[1]
        "correct": ["206"]
   },
    { 
        "question": "What is the alter ego of Batman?",
        "choice": ["Bruce Banner", "Bruce Wayne", "Tony Stark"],  //quizObj[2].choice[0],quizObj[2].choice[1]
        "correct": ["Bruce Wayne"]
   },
    { 
        "question": "How many books are there in the Harry Potter series?",
        "choice": ["7", "5", "8"],  //quizObj[2].choice[0],quizObj[2].choice[1]
        "correct": ["7"]
   },
    { 
        "question": "What is Naruto's surname?",
        "choice": ["Sarutobi", "Uchiha", "Uzumaki"],  //quizObj[2].choice[0],quizObj[2].choice[1]
        "correct": ["Uzumaki"]
   },
    { 
        "question": "What is the name of Sherlock Holmes' partner?",
        "choice": ["Peterson", "Watson", "Hanson"],  //quizObj[2].choice[0],quizObj[2].choice[1]
        "correct": ["Watson"]
   },

];

  var track = [];

    var maxQues = prompt("How many questions do you want to answer?", "5");
    var rand = Math.floor(Math.random() * maxQues);

    var str='<h4>Answer all the questions</h4>';

    for(var i=0;i<maxQues;i++){

        var rand = Math.floor(Math.random() * maxQues);
        str+=(i+1)+'.  '+quizObj[rand].question+'<br>';
        str+='<form><table>'+
            '<tr><td id="a1"><input type="radio" id="rad" name="radio' + i + '"/>'+'&nbsp;&nbsp;'+quizObj[rand].choice[0]+'</td></tr>'+
            '<tr><td id="a2"><input type="radio" id="rad" name="radio' + i + '" />'+'&nbsp;&nbsp;'+quizObj[rand].choice[1]+'</td></tr>'+
            '<tr><td id="a3"><input type="radio" id="rad" name="radio' + i + '"/>'+'&nbsp;&nbsp;'+quizObj[rand].choice[2]+'</td></tr>'+
        '</table></form><br>';
    track[i]=rand;
    }
    str += '<input value="Submit" type="button" onclick="scoreMe()"><br><br>';
    str += 'Score: <input id="score" type="text" size="8" ><br><br><br>';
    document.getElementById('quesRes').innerHTML = str;

  function scoreMe(){
    var sum=0;
    var check=document.getElementById("rad");
    for(var j=0;j<maxQues;j++){
      for(var k=0;k<3;k++){

        if(check.checked===true){
        if(quizObj[track[j]].choice[k]===quizObj[track[j]].correct[0]){
          console.log('Works');
          sum++;
        }
      }

      }
    }
    document.getElementById('score').value = ((sum/maxQues)*100)+'%';
  }
</script>

Answer 1

好吧，您並沒有真正檢查用戶選擇了哪些選項。 您在quizObj[track[j]].choice[k].checked和quizObj[track[j]].correct[0]比較沒有比較您真正想要的。

quizObj[track[j]].choice[k].checked返回undefined ，因為您正在嘗試checked屬性或該數組中的元素。

為了使測驗有效，您需要通過訪問多個input標簽而不是您要訪問的數組來獲取它們的值。 如果從該if子句中刪除.checked ， if需要的內容記錄到控制台。 但是，如果我沒有記錯的話，那不是您想做的檢查。

此外，您還將輸出具有相同id <td>元素，這是非語義性的，只會使您一路難行。

檢查此小提琴以查看它是否有效。 僅選擇一個問題，然后查看控制台。

Answer 2

您在這里遇到多個問題。

我要做的第一件事是將值屬性放在單選按鈕上。

大概是這樣的。

str+='<form><table>'+
        '<tr><td id="a1"><input type="radio" name="radio' + i + '" value="'+quizObj[rand].choice[0]+'"/>'+'&nbsp;&nbsp;'+quizObj[rand].choice[0]+'</td></tr>'+
        '<tr><td id="a2"><input type="radio" name="radio' + i + '" value="'+quizObj[rand].choice[1]+'" />'+'&nbsp;&nbsp;'+quizObj[rand].choice[1]+'</td></tr>'+
        '<tr><td id="a3"><input type="radio" name="radio' + i + '" value="'+quizObj[rand].choice[2]+'"/>'+'&nbsp;&nbsp;'+quizObj[rand].choice[2]+'</td></tr>'+
    '</table></form><br>';

沒有值屬性，我不確定您會比較正確的答案。

現在進入scoreMe函數。 您正在檢查的是測驗對象答案的已檢查屬性，而不是DOM元素。 您需要選擇單選元素並檢查這些元素的選中屬性。 如下所示：

function scoreMe(){
var sum=0;
for(var j=0;j<maxQues;j++){

  var radios = document.getElementsByName('radio' + j),
      rl = radios.length;

  for(var i = 0; i < rl; i++){

    if(radios[i].checked && radios[i].value === quizObj[j].correct[0]){
        sum++;
    }

  }

}
document.getElementById('score').value = ((sum/maxQues)*100)+'%';
  }

仍然存在一個邏輯問題，即重復的問題得分不會達到預期。 我要么開始檢查以防止重復出現問題，要么給每個問題一個唯一的標識符，該標識符可以通過html屬性綁定到收音機。 然后循環播放收音機，並根據此屬性找到他們的問題對象，而不是首先循環問題對象的道具。