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

我是一名新开发人员，这是我的第一个问题。我正在为作业做一个选择题测验。我一直想让下一个按钮转到下一个问题。我认为JS文件的其余部分是正确的

现在，单击下一步没有任何作用，因此我需要执行以下操作 检查时间是否已过期（第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);

var indexQuestion=0；//我们目前的问题索引
变量计时器=0；//每秒上升1的钟
var timeLastSubmit=0；//我们上次提交答案的时间
var timeExpired=false；//当前问题的时间是否过期？
//等待每个问题的秒数
var等待时间=30；
//网站上使用的所有问题
变量问题=[
{
“问题”：“安大略省的首都是哪个城市？”，
“选择”：[“纽约”、“多伦多”、“柏林”、“吉隆坡”]，
“答案”：1
},
{
“问题”：“加拿大的首都是哪个城市？”，
“选择”：[“纽约”、“多伦多”、“渥太华”、“温哥华”]，
“答案”：2
},
{
“问题”：“南极位于哪个大陆？”，
“选择”：[“非洲”、“南极洲”、“亚洲”、“澳大利亚”、“欧洲”、“北美”、“南美”]，
“答案”：1
},
];
函数loadApplication（）{
loadQuestion（indexQuestion）；//将第一个问题加载到网页中
//每秒钟更新一次计时器，并检查问题是否已得到回答
setInterval（函数（）{
定时器++；
checkExpirationTime（）；
},1000);
}
函数clickNext（）{
//确保用户在时间到期之前回答了问题
timeLastSubmit=计时器；
checkExpirationTime（）；
//从下拉列表中获取答案
var selectedIndexAnswer=getElementById（'choices'）；
返回selectedIndexResponse；
//从阵列中获取anwer
var answer=问题[indexQuestion]。选择[i]；
检查答案（）；
};
函数checkAnswer（）{
//比较答案。只有在正确的情况下，才进入下一个问题-如果（答案==问题[indexQuestion]。答案）
如果（selectedIndexAnswer==答案）{
nextQuestion（）；
}
否则{
警报（'请重试'）；
}
}
函数checkExpirationTime（）{
//检查时间，一旦时钟达到30秒，不要移动到下一个问题
如果（计时器-timeLastSubmit<等待时间&&！timeExpired）{
document.getElementById（“秒”）.innerHTML=等待时间；
}
否则{
timeExpired=true；
警报（'请重试'）；
clearInterval（时间过期）；
}
}
函数nextQuestion（）{
//继续下一个问题，直到没有问题为止
如果（indexQuestion回答您的第一个问题

我一直想让下一个按钮转到下一个问题

为此，您需要将“单击事件侦听器”添加到“下一步”按钮

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

下一部分呢

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

几乎..你需要在这里和那里做一些更正

我对钢笔做了一些编辑，可以在这里找到


由于您是一名学习者，我建议不要复制它。即使是我共享的代码笔也不完整，但应该可以帮助您继续前进。
回答您的第一个问题

我一直想让下一个按钮转到下一个问题

为此，您需要将“单击事件侦听器”添加到“下一步”按钮

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

下一部分呢

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

几乎..你需要在这里和那里做一些更正

我对钢笔做了一些编辑，可以在这里找到


由于您是一名学习者，我建议您不要复制它。即使是我共享的codepen也不完整，但应该可以帮助您继续学习。
查看您的钢笔，我发现您的代码存在以下问题：

return语句的滥用。您在函数的第二行添加了一个
return
语句，导致其其余部分被完全忽略
onclick
未添加到“下一步”按钮，脚本中的
addEventListener
也未添加。因此，单击“下一步”按钮对应用程序没有任何影响
下一步

作用域问题。在JavaScript中，当您在一个作用域内定义变量时，该变量永远无法从该作用域外访问。这意味着在函数内定义变量（如您的情况）将无法在另一个完全独立的函数中使用（除非您以某种方式将其作为参数传递）.我建议对JavaScript作用域进行更多的研究，以便更好地了解它的工作原理
所有3个问题都已在我为您创建的一支新笔中修复，供您查看：
不管你怎么说
<button id="btnNext">Next</button>