Таким образом, я пробиваю несколько стен, чтобы моя викторина кода заработала.

1) Таймер не останавливается после завершения, несмотря на использование clearInterval.

2) В конце викторины, после того, как вы отправите свои инициалы, я хочу, чтобы панель отправки исчезла и появился список рекордов, которые сохраняются там до нажатия «Очистить баллы». Проблема в том, когда кнопка отправки щелкнул, он циклически возвращается к началу, и я не уверен, почему. Я начал строить это, но затем понял свою ошибку и пытался понять это слишком долго.

Счастливых праздников! Любая помощь приветствуется!

{amp}lt;!DOCTYPE html{amp}gt; {amp}lt;html lang="en"{amp}gt; {amp}lt;head{amp}gt; {amp}lt;meta charset="UTF-8"{amp}gt; {amp}lt;meta name="viewport" content="width=device-width, initial-scale=1.0"{amp}gt; {amp}lt;meta http-equiv="X-UA-Compatible" content="ie=edge"{amp}gt; {amp}lt;title{amp}gt;Code Quiz{amp}lt;/title{amp}gt; {amp}lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3 Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"{amp}gt; {amp}lt;link rel="stylesheet" type="text/css" href="assets/style.css"{amp}gt; {amp}lt;script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;/head{amp}gt; {amp}lt;body id="body"{amp}gt; {amp}lt;div class="card shadow-sm p-3 mb-5 bg-white rounded" style="max-width: 50%; margin: 40px auto;"{amp}gt; {amp}lt;div class="card-body"{amp}gt; {amp}lt;button type="button" class="btn btn-light" id= "highScores" style= "float:left;"{amp}gt;High Scores{amp}lt;/button{amp}gt; {amp}lt;button id= "timer" style= "float:right;"{amp}gt;Time Left: {amp}lt;span id="seconds-left"{amp}gt;{amp}lt;/span{amp}gt;{amp}lt;/button{amp}gt; {amp}lt;br{amp}gt; {amp}lt;form class= "show-onclick"{amp}gt; {amp}lt;/form{amp}gt; {amp}lt;div class="score"{amp}gt; {amp}lt;ul id=".high-score"{amp}gt;{amp}lt;/ul{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;h3 class = "question text-center"{amp}gt;{amp}lt;/h3{amp}gt; {amp}lt;br{amp}gt; {amp}lt;div class= "answers"{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;div class= "text-center" id= "startText"{amp}gt; {amp}lt;h1 class="card-title"{amp}gt;Code Quiz Challenge{amp}lt;/h1{amp}gt; {amp}lt;br{amp}gt; {amp}lt;br{amp}gt; {amp}lt;p{amp}gt;Try and answer the following code related questions within the time limit. Keep in mind that incorrect answers will penalize your score time by ten seconds.{amp}lt;/p{amp}gt; {amp}lt;br{amp}gt; {amp}lt;br{amp}gt; {amp}lt;button type="button" class="btn btn-secondary btn-lg" id= "start"{amp}gt;Start Code Quiz{amp}lt;/button{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;script src="./assets/script.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;/body{amp}gt; {amp}lt;/html{amp}gt; 
 $(document).ready(function(){ var secondsLeft = 75 var indexQandA = 0; var 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" }, { title: "Arrays in JavaScript can be used to store _________", choices: ["numbers and strings", "other arrays", "booleans", "all-of-the-above"], answer: "all-of-the-above" }, { title: "String values must be enclosed within _____ when being assigned to variables.", choices: ["commas", "curly brackets", "quotes", "parentheses"], answer: "quotes" }, { title: "A very useful tool used during debuggingfor printing content to the debugger is:", choices: ["JavaScript", "terminal/ bash", "for loops", "console.log"], answer: "console.log" }, ] $("#start").on("click", function () { $('#startText').remove(); loadQandA(); setTimer(); }); function setTimer(){ $("#seconds-left").text(secondsLeft); let countdown = setInterval(function(){ secondsLeft--; $("#seconds-left").text(secondsLeft); if (secondsLeft {amp}lt;=0) { clearInterval(countdown); } }, 1000); } function loadQandA() { choices = questions[indexQandA].choices; var question = questions[indexQandA].title; $('.question').html(question); for (var i = 0; i {amp}lt; 4; i  ) { var displayAnswer = questions[indexQandA].choices[i]; $('.answers').append('{amp}lt;h4 class= "button-answer" id='   displayAnswer   '{amp}gt;'   displayAnswer   '{amp}lt;/h4{amp}gt;{amp}lt;br{amp}gt;'); } $("h4").click(function () { var id = $(this).attr('id'); var answer= questions[indexQandA].answer; if (id === answer) { answered = true; console.log("correct") // $('.question').text("Correct Answer"); indexQandA  ; correctAnswer(); } else { answered = true; // $('.question').text("Wrong Answer"); indexQandA  ; incorrectAnswer(); } }); function correctAnswer(){ resetRound(); } function incorrectAnswer(){ resetRound(); timerDown(); } function timerStop(){ clearInterval(secondsLeft); console.log(secondsLeft); } function timerDown(){ secondsLeft = secondsLeft -= 9; } function resetRound(){ $('.button-answer').remove(); if (indexQandA {amp}lt; questions.length) { loadQandA(); } else { timerStop(); $('.question').remove(); $('.show-onclick').append('{amp}lt;div class="form-group"{amp}gt; {amp}lt;label id= "initials" {amp}gt;{amp}lt;/label{amp}gt;{amp}lt;input class="form-control" placeholder="Enter initials"{amp}gt;{amp}lt;/div{amp}gt;{amp}lt;button type="submit" class="btn btn-primary"{amp}gt;Submit{amp}lt;/button{amp}gt;'); var score = secondsLeft $("#initials").append("Your score is: "   score); } } } var highScoreInput = document.querySelector(".form-control"); var highScoreForm = document.querySelector(".btn-primary"); var highScoreList = document.querySelector("#high-score"); var highScores = []; init(); function renderHighScores() { // Clear highScoreList element highScoreList.innerHTML = ""; // Render a new li for each highScore for (var i = 0; i {amp}lt; todos.length; i  ) { var highScore = highScores[i]; var li = document.createElement("li"); li.textContent = highScore; li.setAttribute("data-index", i); highScoreList.appendChild(li); } } function init() { // Get stored highScores from localStorage var storedHighScoreString = localStorage.getItem("highScores"); // Parsing the JSON string to an object var storedHighScores = JSON.parse(storedHighScoreString); // If highScores were retrieved from localStorage, update the highScores array to it if (storedHighScores !== null) { highScores = storedHighScores; } // Render highScores to the DOM renderHighScores(); } function storeHighScores() { // Stringify and set "highScores" key in localStorage to highScores array var highScoresString = JSON.stringify(highScores); localStorage.setItem("highScores", highScoresString); } // When form is submitted... highScoreForm.addEventListener("submit", function(event) { event.preventDefault(); var highScoreText = highScoreInput.value.trim(); // Return from function early if submitted highScoreText is blank if (highScoreText === "") { return; } // Add new highScoreText to highScores array, clear the input highScores.push(highScoreText); highScoreInput.value = ""; // Store updated highScores in localStorage, re-render the list storeHighScores(); renderHighScores(); }); });