我如何 select 用户在我的 javascript 文件夹中选择了哪个单选标记

Question

I have tried the code in my showresults function to select the users answers (which would be the input tag that the user has selected as the answer to each quiz question) and comparing it to the correct answer in my questions array but whenever I do this the submit button doesn't work and I am also not sure if I should put this code in my nextquestion function or my showresults function.我已经在我的 showresults function 到 select 中尝试了用户回答的代码（这将是用户选择作为每个测验问题的答案的输入标签）并将其与我的问题数组中的正确答案进行比较但是每当我这样做时提交按钮不起作用，我也不确定是否应该将此代码放在我的下一个问题 function 或我的显示结果 function 中。

this is my script file这是我的脚本文件

const questiontext= document.getElementById('question-text');
const A= document.getElementById('OptionA');
const B= document.getElementById('OptionB');
const C= document.getElementById('OptionC');
const D= document.getElementById('OptionD');
const nextbutton= document.getElementById('next');
const resultcontainer= document.getElementById('results');
const submitbutton= document.getElementById('submit');
const options= document.querySelectorAll('options');
const questions=[
    {
        question: "What is the best item at mcdonalds?",
        answerA: "Fries",
        answerB: "Big Mac",
        answerC: "Mcnuggets",
        answerD: "Quarter Pounder",
        correctanswer: "Big Mac"
    },
    {
        question: "What is the cheapest thing on the mcdonalds menu?",
        answerA: "Fries",
        answerB: "Double Cheeseburger",
        answerC: "Happy Meal",
        answerD: "Orange juice",
        correctanswer: "Fries"
    },
    {
        question: "What is the least popular item at mcdonalds?",
        answerA: "Filet O Fish",
        answerB: "Hamburger",
        answerC: "Veggie Deluxe",
        answerD: "Mineral water",
        correctanswer: "Filet O Fish"
    },
    {
        question: "How many dips are you allowed with 20 Mcnuggets?",
        answerA: "2",
        answerB: "4",
        answerC: "3",
        answerD: "6",
        correctanswer: "4"
    }
];
//Question index at start
let questionindex= 0;
//Before they have answered any question
let numcorrect=0;
const currentquestion= () =>{
    questiontext.innerHTML= questions[questionindex].question;
    A.innerHTML= questions[questionindex].answerA;
    B.innerHTML= questions[questionindex].answerB;
    C.innerHTML= questions[questionindex].answerC;
    D.innerHTML= questions[questionindex].answerD;
}
const nextquestion= () =>{
    currentquestion();
    questionindex++
    if(questionindex === questions.length){
        submitbutton.classList.remove('hidden');
        nextbutton.classList.add('hidden'); 
     }
}
const showresults= () =>{
    if(options.checked===questions[questionindex].correctanswer){
        numcorrect++
    }
    resultcontainer.innerHTML=`You got ${numcorrect} out of ${questions.length}`;
}
//Load first question and answers
currentquestion();
//Button to display next question
nextbutton.addEventListener('click', nextquestion);
submitbutton.addEventListener('click', showresults);

This is my html file这是我的 html 文件

<!DOCTYPE html>
<html>
    <head>
        <title>Fast food facts</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="static/styles.css">
    </head>
    <body>
        <div id="quizcontainer">
            <div id="quiz">
                <div id="question"><h2 id="question-text"></h2></div>
                <div id="answers">
                    <label for="A" id="OptionA"></label>
                    <input type="radio" name="option" id="A" class="options">
                    
                    <label for="B" id="OptionB"></label>
                    <input type="radio" name="option" id="B" class="options">
                    
                    <label for="C" id="OptionC"></label>
                    <input type="radio" name="option" id="C" class="options">
                    
                    <label for="D" id="OptionD"></label>
                    <input type="radio" name="option" id="D" class="options">
                </div>
            </div>
        </div>
        <button id="submit" class="hidden">Submit</button>
        <button id="next">Next</button>
        <div id="results"></div>
        <script src="static/script.js"></script>
    </body>
</html>

Answer 1

I fixed your comparison on submit.我在提交时修复了你的比较。

First, you were not targeting the radio inputs because there was a missing dot in the selector:首先，您没有瞄准无线电输入，因为选择器中缺少一个点：

const options = document.querySelectorAll(".options");  // Added a dot to specify a class

Then, to each radio, I added a value using the currentquestion function.然后，我使用当前currentquestion为每个收音机添加了一个value 。

A.nextElementSibling.value = questions[questionindex].answerA;

Finally, I had all that is needed to do a comparison in showresults .最后，我拥有了在showresults中进行比较所需的一切。 A loop was necessary to go through each radio:通过每个无线电循环到 go 是必要的：

// Loop through the radio inputs to compare its value if checked
options.forEach(function(option){
  if(option.checked && option.value === questions[questionindex].correctanswer){
    console.log("Correct anser found!")
    numcorrect++;
  }
})

 const questiontext = document.getElementById("question-text"); const A = document.getElementById("OptionA"); const B = document.getElementById("OptionB"); const C = document.getElementById("OptionC"); const D = document.getElementById("OptionD"); const nextbutton = document.getElementById("next"); const resultcontainer = document.getElementById("results"); const submitbutton = document.getElementById("submit"); const options = document.querySelectorAll(".options"); // Added a dot to specify a class const questions = [ { question: "What is the best item at mcdonalds?", answerA: "Fries", answerB: "Big Mac", answerC: "Mcnuggets", answerD: "Quarter Pounder", correctanswer: "Big Mac" }, { question: "What is the cheapest thing on the mcdonalds menu?", answerA: "Fries", answerB: "Double Cheeseburger", answerC: "Happy Meal", answerD: "Orange juice", correctanswer: "Fries" }, { question: "What is the least popular item at mcdonalds?", answerA: "Filet O Fish", answerB: "Hamburger", answerC: "Veggie Deluxe", answerD: "Mineral water", correctanswer: "Filet O Fish" }, { question: "How many dips are you allowed with 20 Mcnuggets?", answerA: "2", answerB: "4", answerC: "3", answerD: "6", correctanswer: "4" } ]; //Question index at start let questionindex = 0; //Before they have answered any question let numcorrect = 0; const currentquestion = () => { questiontext.innerHTML = questions[questionindex].question; A.innerHTML = questions[questionindex].answerA; A.nextElementSibling.value = questions[questionindex].answerA; B.innerHTML = questions[questionindex].answerB; B.nextElementSibling.value = questions[questionindex].answerB; C.innerHTML = questions[questionindex].answerC; C.nextElementSibling.value = questions[questionindex].answerC; D.innerHTML = questions[questionindex].answerD; D.nextElementSibling.value = questions[questionindex].answerD; }; const nextquestion = () => { currentquestion(); questionindex++; if (questionindex === questions.length) { submitbutton.classList.remove("hidden"); nextbutton.classList.add("hidden"); } }; const showresults = () => { // Loop through the radio inputs to compare its value if checked options.forEach(function (option) { if ( option.checked && option.value === questions[questionindex].correctanswer ) { console.log("Correct anser found;"); numcorrect++; } }). resultcontainer.innerHTML = `You got ${numcorrect} out of ${questions;length}`; }; //Load first question and answers currentquestion(). //Button to display next question nextbutton,addEventListener("click"; nextquestion). submitbutton,addEventListener("click"; showresults);

 <html> <head> <title>Fast food facts</title> <meta charset="UTF-8"> <link rel="stylesheet" href="static/styles.css"> </head> <body> <div id="quizcontainer"> <div id="quiz"> <div id="question"> <h2 id="question-text"></h2> </div> <div id="answers"> <label for="A" id="OptionA"></label> <input type="radio" name="option" id="A" class="options"> <label for="B" id="OptionB"></label> <input type="radio" name="option" id="B" class="options"> <label for="C" id="OptionC"></label> <input type="radio" name="option" id="C" class="options"> <label for="D" id="OptionD"></label> <input type="radio" name="option" id="D" class="options"> </div> </div> </div> <button id="submit" class="hidden">Submit</button> <button id="next">Next</button> <div id="results"></div> <script src="static/script.js"></script> </body> </html>

我如何 select 用户在我的 javascript 文件夹中选择了哪个单选标记

问题描述

1 个解决方案

解决方案1
0 2022-02-20 22:14:55

我如何 select 用户在我的 javascript 文件夹中选择了哪个单选标记

问题描述

1 个解决方案

解决方案1 0 2022-02-20 22:14:55

解决方案1
0 2022-02-20 22:14:55