重播完成后，下一个（问题）按钮不起作用答案

【问题标题】：Next(question) Button does not work when replay is done重播完成后，下一个（问题）按钮不起作用
【发布时间】：2021-12-14 05:27:56
【问题描述】：

这是我为学习 JS 而制作的一个小测验应用程序。它工作正常并给出了正确的结果，但是当单击重播时，它会显示测验框，但“下一步”按钮不起作用。没有控制台错误，我无法理解在哪里查找代码中的错误。

这是工作应用程序的 jsFiddle 链接 https://jsfiddle.net/lifet/t20h6gw8/10/

js 有脚本和问题文件这是测验和结果框的 Html

 <!--Start Quiz Box-->
       <div class="row quiz_box">
        <div class="col-md-6 col-sm-12">
            <div class="card">
                       //other part of code
                    <!--Quix Box Footer-->
                    <footer>
                        <button class="next_btn">Next</button>
                       
                    </footer>
                </div>
            </div>
        </div>
       </div>         
        <!--End Quiz Box-->

        <!--Start Result Box-->
        <div class="row result_box">
            <div class="card col-md-6 col-sm-12">
            //other part of code
            <div class="buttons">
                <button class="restart">Replay Quiz</button> 
            </div>
        </div>
        </div>
        <!--End Result Box-->
    </div>

这是分别隐藏和显示结果和测验框的css

.removeResultBox.result_box{
  display: none;
}
.removeResultBox.quiz_box{
  display: flex;
}

这是回放功能和点击下一步的js。

//----------------  restart Quiz-------------------//

const replayQuiz = resultBox.querySelector(".restart");

function showQuizBox(){}

replayQuiz.onclick=() =>{
    quizBox.classList.add("removeResultBox");// this displays the quiz box
    resultBox.classList.add("removeResultBox");// this hides the result box

    queCounter = 0;
    queNumber = 1;
    startTime = 15;
    widthValue = 0;
    userScore =0;

   showQuestions(queCounter);
   questionCounter(queNumber);
   clearInterval(timeCounter);
   clearInterval(counterLine);
   startTimer(startTime);
   startTimeLine(widthValue);

   nextBtn.style.display="none";

}

这是下一个按钮的点击事件

//go on to the next question
nextBtn.onclick=()=>{
    console.log("next");
    if (queCounter < questions.length - 1) {
        queCounter++;
        queNumber++;
        showQuestions(queCounter);
        questionCounter(queNumber);
        clearInterval(timeCounter);
        startTimer(startTime);
        clearInterval(counterLine);
        startTimeLine(widthValue)
        nextBtn.style.display="none";
    }
    else {
        showResultBox();
    }
}

我被困得很厉害，非常感谢任何帮助。谢谢！！

【问题讨论】：

请更新您的帖子并添加minimal, reproducible example。也可以使用Stack Snippets。
我刚刚为代码添加了 jsfiddle 链接。抱歉，css 有点太长了
在showResultBox() 函数中，您正在重新定义nextBtn.onclick。尝试在测验结束后立即显示结果而不修改nextBtn.onclick。
对不起，我没听懂。当为最后一个问题点击下一个按钮时，quizBox 会隐藏，resultBox 会立即显示结果。我不知道该怎么做。
按照您的建议对 showResultBox() 函数进行了以下更改 ``` function showResultBox(){ resultBox.classList.add("showResultBox"); quizBox.classList.add("showResultBox"); const scoreText = resultBox.querySelector(".score_text"); let scoreTag = ' 你得分
'+ userScore+ '
out of
'+ questions.length +'
'; scoreText.innerHTML = scoreTag; } ``` 并且它第二次起作用了，但没有更进一步。现在的不同之处在于它正在按下下一个按钮但没有做任何事情。也对小提琴进行了更改

标签： javascript bootstrap-4

【解决方案1】：

你必须换行

const replayQuiz = document.querySelector(".restart"); 检查website

【讨论】：

【解决方案2】：

在replayQuiz.onclick 中而不是添加removeResultBox 尝试删除showResultBox：

replayQuiz.onclick = () => {
  resultBox.classList.remove('showResultBox')
  quizBox.classList.remove('showResultBox')
  ...
}

【讨论】：