javascript - clearInterval 似乎正在停止不相关的代码

Question

let questions = [ 
    {
        title: "Commonly used data types DO NOT include:",
        choices: ["strings", "booleans", "alerts", "numbers"],
        answer: "alerts"
    },
    {
        title: "The condition in an if / else statement is enclosed within ____.",
        choices: ["quotes", "curly brackets", "parentheses", "square brackets"],
        answer: "parentheses"
    }
]

let main = document.getElementById('main');
let content = document.getElementById('content');
let title = document.getElementById('quiz-title');
let instr = document.getElementById('instructions');
let btn = document.getElementById('start-button');
let time = document.getElementById('time');
let h2;
let btns;
let newElement;
let correct;
let questionCounter;
let seconds;

const timer = () => {
    time.textContent = seconds;
    seconds--;
    if (seconds < 0) {
        clearInterval(timerStart);
        questionCounter = 4;
    }
}

var timerStart = setInterval(timer, 1000);

const startQuiz = () => {
    title.style.display = 'none';
    instr.style.display = 'none';
    btn.style.display = 'none';
    questionCounter = 0;
    newElement = document.createElement('h2');
    newElement.textContent = questions[questionCounter].title;
    newElement.id = questionCounter;
    content.appendChild(newElement);
    questions[questionCounter].choices.forEach(function(choice) {
        newElement = document.createElement('button');
        newElement.textContent = choice;
        newElement.setAttribute('class', 'btn btn-success btn-block');
        newElement.id = choice;
        content.appendChild(newElement);
    })
    seconds = 10;
    timerStart;
};

const advanceQuestion = () => {
        document.getElementById(`${questionCounter}-answered`).style.display = 'none';
    questionCounter++;
    if (questionCounter < 2) {
        newElement = document.createElement('h2');
        newElement.textContent = questions[questionCounter].title;
        newElement.id = questionCounter;
        content.appendChild(newElement);
        questions[questionCounter].choices.forEach(function(choice) {
            newElement = document.createElement('button');
            newElement.textContent = choice;
            newElement.setAttribute('class', 'btn btn-success btn-block');
            newElement.id = choice;
            content.appendChild(newElement);
        })
    } else {
        newElement = document.createElement('h2');
        newElement.textContent = 'Good job!';
        content.appendChild(newElement);
        newElement = document.createElement('p');
        newElement.textContent = `Your score is ${time.innerHTML}`;
        content.appendChild(newElement);
    }
    
}

const checkAnswer = (Event) => {
    if (questions[questionCounter].choices.indexOf(Event.target.id) == -1) {
        return;
    } else {
            newElement = document.createElement('h4');
            newElement.textContent = 'Answered';
            newElement.id = `${questionCounter}-answered`;
            content.appendChild(newElement);
        }
        h2 = document.getElementById(questionCounter)
        h2.style.display = 'none';
        for (let i = 0; i < questions[questionCounter].choices.length; i++) {
            btns = document.getElementById(questions[questionCounter].choices[i]);
            btns.style.display = 'none';
        }
        setTimeout(advanceQuestion, 1000);
}

btn.onclick = startQuiz;
document.onclick = checkAnswer;

main {
    text-align: center;
}

section {
    width: 80%;
    margin: 0 auto;
}

.btn {
    margin: 0.5rem 0;
}

#timer {
    position: absolute;
    top: 0;
    right: 0;
}

<header>
  <h6 id="high-scores">View Highscores</h6>
  <h6 id="timer">Time: <span id="time">0</span></h6>
</header>

<main id="main">
  <section id="content">
    <h1 id="quiz-title">Coding Quiz Challenge</h1>
    <p id="instructions">Try to answer the following code related questions within the time limit. Keep in mind that incorrect answers will penalize your score/time by ten seconds!</p>
    <button  id="start-button" type="button" class="btn btn-success">Begin Quiz</button>
  </section>
</main>

我是 JavaScript 新手，我的任务是编写代码测验应用程序（不允许使用 jQuery）。该应用程序的工作方式如下：每次加载一个问题作为回答，并且问题计数器随着它的进行而递增。一旦问题计数器达到阈值，测验结束并显示分数。我添加了一个计时器，如果测验在给定的时间内完成，则没有问题，但如果计时器达到 0，则整个应用程序将在 clearInterval 运行后停止工作。

const timer = () => {
time.textContent = seconds;
seconds--;
if (seconds < 0) {
    clearInterval(timerStart);
    questionCounter = 4;
}
}
const timerStart = setInterval(timer, 1000);

调用函数中的定时器设置为 75 秒。该应用程序基于 onclick 方法的价值而前进，并且在 clearInterval() 调用之后似乎停止接受输入。如果需要，我可以发布其余的代码，但它有点冗长，因为我是新手。

编辑

const advanceQuestion = () => {
if (correct === false) {
    document.getElementById(`${questionCounter}-incorrect`).style.display = 'none';
} else {
    document.getElementById(`${questionCounter}-correct`).style.display = 'none';
}
questionCounter++;
if (questionCounter < 5) {
    newElement = document.createElement('h2');
    content.appendChild(newElement);
    questions[questionCounter].choices.forEach(function(choice) {
        newElement = document.createElement('button');
        content.appendChild(newElement);
    })
} else {
    newElement = document.createElement('h2');
    newElement.textContent = 'Good job!';
    content.appendChild(newElement);
    newElement = document.createElement('p');
    newElement.textContent = `Your score is ${time.innerHTML}`;
    content.appendChild(newElement);
}

const checkAnswer = (Event) => {
    if (Event.target.id === questions[questionCounter].answer) {
        newElement = document.createElement('h4');
        newElement.textContent = 'Correct!';
        content.appendChild(newElement);
    } else {
        newElement = document.createElement('h4');
        newElement.textContent = 'Incorrect';
        content.appendChild(newElement);
    }
    h2 = document.getElementById(questionCounter)
    h2.style.display = 'none';
    for (let i = 0; i < questions[questionCounter].choices.length; i++) {
        btns = document.getElementById(questions[questionCounter].choices[i]);
        btns.style.display = 'none';
    }
    setTimeout(advanceQuestion, 1000);
}

const startQuiz = () => {
title.style.display = 'none';
questionCounter = 0;
newElement = document.createElement('h2');
content.appendChild(newElement);
questions[questionCounter].choices.forEach(function(choice) {
    newElement = document.createElement('button');
    content.appendChild(newElement);
})
seconds = 10;
timerStart;

btn.onclick = startQuiz;
document.onclick = checkAnswer;

标签： javascriptclearinterval