Question

我是一名新开发人员，这是我的第一个问题。我正在尝试对一项作业进行多项选择测验。我一直想将 NEXT （下一步）按钮移至下一个问题。我认为JS文件的其余部分都是正确的...

现在 clickNext 不会执行任何操作，因此我需要执行以下操作检查时间是否过期（第39行）用户是否在指定的时间内回答了问题（第40行）如果否，请重试，时钟将重新开始（第60-70行）如果是，则存储选择的答案-我认为这部分使我绊倒了，我不确定在这里使用什么检查所选答案是否正确（第50-57行）如果答案正确，请移至下一个问题（第52-53行）如果答案错误，请警告“请重试”（第55-56行）

我试图返回答案addEventListener，将checkAnswer函数放在clickNext函数中

        var indexQuestion = 0; // Current index of question we are on
        var timer = 0;  // A clock that goes up by 1 every second
        var timeLastSubmit = 0;  // the time we last submitted an answer
        var timeExpired = false;  // Did time expire for current question?

        // number of seconds to wait for each question
        var WAIT_TIME = 30;

        // all questions to be used on the website
        var QUESTIONS = [
            {
                "question":"Which city is the capital of Ontario?",
                "choices":["New York","Toronto","Berlin","Kuala Lumpur"],
                "answer":1
            },
            {
                "question":"Which city is the capital of Canada?",
                "choices":["New York","Toronto","Ottawa","Vancouver"],
                "answer":2
            },
            {
                "question":"Which continent does the south pole reside?",
                "choices":["Africa","Antarctica","Asia","Australia","Europe","North America","South America"],
                "answer":1
            },
        ];

        function loadApplication() {
            loadQuestion(indexQuestion);   // load the first question into the web page
            // update the timer every second and check if question has been answered yet
            setInterval(function(){
                timer++;
                checkExpirationTime();
            },1000);
        }

        function clickNext() {
            // make sure that the user has answered the question before the time has expired
            timeLastSubmit = timer;
            checkExpirationTime();
                // Get the answer from drop down
                var selectedIndexAnswer = getElementById('choices');
                return selectedIndexAnswer;
                // Get the anwer from the array
                var answer = QUESTIONS[indexQuestion].choices[i];
                checkAnswer();
            };


        function checkAnswer(){
            // Compare answer.  Only if correct, do you move onto next question -   if(answer == QUESTIONS[indexQuestion].answer)
            if(selectedIndexAnswer == answer) {
                nextQuestion();
            }
            else {
                alert('Please try again.');
            }
        }

        function checkExpirationTime() {
            // check the time, once the clock has reached 30 seconds do not move to the next quesiton
            if(timer - timeLastSubmit < WAIT_TIME && !timeExpired){
            document.getElementById("seconds").innerHTML = WAIT_TIME;
            }
            else{
                    timeExpired = true;
                    alert('Please try again.');
                    clearInterval(timeExpired);
                }
        }

        function nextQuestion() {
            // advance to the next question, until the there are no more questions
            if(indexQuestion<QUESTIONS.length-1)
            {
                indexQuestion++;
                loadQuestion(indexQuestion);
            }
        }


        function loadQuestion(indexQuestion){
            // grab the question
            document.getElementById("question").textContent = QUESTIONS[indexQuestion].question;
            // build the html string for select menu
            var choices = "";
            var i=0;
            //loop through the choices
            while(i<QUESTIONS[indexQuestion].choices.length){
            // create a string of <option>answer</option><option>answer</option><option>answer</option>...  and load it into the choices variable
                choices += "<option>" + QUESTIONS[indexQuestion].choices[i] +"</option>";
                i++;
            }
            document.getElementById("choices").innerHTML = choices;
        }

        // When the DOM is ready, run the function loadApplication();
        document.addEventListener("DOMContentLoaded",loadApplication);

目前，该程序不会前进到下一个问题，而只是停留在第一个问题上。

Answer 1

回答第一个问题

我被迫将NEXT按钮移到下一个问题

为此，您需要将点击事件侦听器添加到下一个按钮。

document.getElementById("btnNext").addEventListener("click",clickNext)

还有下一部分

我认为JS文件的其余部分都是正确的。

几乎..您需要在此处和此处进行一些更正。

我对笔进行了一些编辑，可以在这里找到。

https://codepen.io/nithinthampi/pen/Yzzqqae

因为，您是一名学习者，所以我建议不要复制它。甚至我共享的代码笔还不完整，但是应该可以帮助您继续前进。

Answer 2

仔细检查一下笔迹，以下是我在您的代码中发现的以下问题：

误用return语句。您在函数的第二行添加了return语句，导致其余部分被完全忽略。

function clickNext() {
            // make sure that the user has answered the question before the time has expired
            timeLastSubmit = timer;
            checkExpirationTime();
                // Get the answer from drop down
                var selectedIndexAnswer = getElementById('choices');
     Here -->   return selectedIndexAnswer;
                // Get the anwer from the array
                var answer = QUESTIONS[indexQuestion].choices[i];
                checkAnswer();
            }

onclick未添加到“下一步”按钮，脚本中的addEventListener也未添加。结果，单击“下一步”按钮对您的应用程序完全没有影响。

<button id="btnNext">Next</button>

范围问题。在JavaScript中，当您在范围内定义变量时，永远无法从该范围之外访问该变量。意味着在函数内部定义变量（例如您的情况）不会使它在另一个完全独立的函数中可用（除非您以某种方式将其作为参数传递）。我建议对JavaScript范围进行更多研究，以更好地了解其作用方式。

所有3个问题均已在我创建的供您查看的新笔中修复：https://codepen.io/MMortaga/pen/PooNNYE?editors=1010 但是，您可能需要更多地使用计时器，因此请查看是否可以解决问题：P 花点时间回顾一下我提到的所有更改，如果您仍然遇到任何问题，请在下面发表评论，我们将很乐意为您提供帮助。

为什么我的按钮不前进到下一个问题？

2 个答案: