javascript - .show() 和 .toggle() 不会在问答游戏中显示最终游戏屏幕

Question

我已经一遍又一遍地检查代码。我尝试使用 JQuery 显示最终的游戏屏幕(结果屏幕)，然后再次通过定义全局变量。我将其称为另一个函数的一部分并在其自己的函数内。我想出的任何组合都没有显示我的最终结果屏幕。

var welcome = $("#welcome-screen")
var gameOver = $("#result-screen")
var game = $("#game-screen")

var playerInteract = {
    correctAnswers: 0,
    incorrectAnswers: 0,
    unanswered: 8,
    seconds: 10,
    //done: false,

    welcome: function() {
        gameOver.toggle();
        game.hide();
    },

    initiate: function() {
        welcome.hide();
        game.show();
        playerInteract.timer();
    },

    timer: function() {
        var windowTimeout = setTimeout(function() {
            //playerInteract.gameOver() 
            game.hide()
               playerInteract.answerCheck()
               playerInteract.gameOverLoad()
            },  10000);
        var intervalVariable = setInterval(playerInteract.decrement, 1000);
        var seconds = playerInteract.seconds;

    },  

    decrement: function () {
        if (playerInteract.seconds >= 2) {
                playerInteract.seconds--;
                console.log("seconds: " + playerInteract.seconds);
                $("#countdown").text(playerInteract.seconds);
            }
    },
   gameOverLoad: function() {
       gameOver.show();
       console.log("gameover");
   }

};


window.onload = playerInteract.welcome;

$("#start-button").on("click", function(event) {
    //event.preventDefault()
    playerInteract.initiate()
});

$("#countdown").text(playerInteract.seconds); 

<----HTML---->

<div id="welcome-screen" class="container">

    <img id="header" src="assets/images/header-image.png" alt="Stephen King Killer Trivia">
    <h1>Take a stab at it!</h1>
    <button id=start-button><h2>STAB!</h2></button>

</div>

<div id="game-screen" class="container">
    <img id="header" src="assets/images/header-image.png" alt="Stephen King Killer Trivia">

    <h2>Take a stab at it!</h2>
    <h3>Time Remaining: <div id="countdown"></div></h3>

    <img id="penny" src="assets/images/penny.png" alt="Pennywise the clown.">

    <h4>What's the name of the killer clown in Stephen King's novel, <em>IT</em>?</h4>

        <div class="answer-boxes">
            <input type="radio" name="q1" class="radio-button" id="wrongA"> Torchy
            <input type="radio" name="q1" class="radio-button" id="wrongB"> Quarterdumb
            <input type="radio" name="q1" class="radio-button" id="correct1"> Pennywise
            <input type="radio" name="q1" class="radio-button" id="wrongC"> Boinko
        </div>

    <img id="georgie" src="assets/images/georgie.png" alt="Georgie from 'It'">

    <h4>Which King protagonist went crazy and killed<br> most of her classmates and teachers during prom?</h4>

    <div class="answer-boxes">
        <input type="radio" name="q2" class="radio-button" id="wrongD"> Sandy
        <input type="radio" name="q2" class="radio-button" id="wrongE"> Dolores
        <input type="radio" name="q2" class="radio-button" id="wrongF"> Sherrie
        <input type="radio" name="q2" class="radio-button" id="correct2"> Carrie
        </div>

    <h4>Stephen King regularly contributed to <em>Dave's Rag</em> in high school.</h4>

    <div class="answer-boxes">
        <input type="radio" name="q3" class="radio-button" id="correct3"> True
        <input type="radio" name="q3" class="radio-bitton" id="wrongG"> False
        </div>

    <h4>What year and model car was featured <br>in the movie <em>Christine</em> based on a Stephen King book?</h4>

    <div class="answer-boxes">
        <input type="radio" name="q4" class="radio-button" id="wrongH"> 1962 Ford Mustang
        <input type="radio" name="q4" class="radio-button" id="wrongI"> 1957 Chevy Chevelle
        <input type="radio" name="q4" class="radio-button" id="wrongJ"> 1951 Jaquar XK 120
        <input type="radio" name="q4" class="radio-button" id="corrcet4"> 1958 Plymouth Fury
        </div>

    <h4>Mike Hanlon made seven phone calls in Stephen King's novel, <em>IT</em>.</h4>

    <div class="answer-boxes">
        <input type="radio" name="q5" class="radio-button" id="wrongK"> True
        <input type="radio" name="q5" class="radio-button" id="correct5"> False
    </div>

    <h4>What's the name of Stephen King's western/fantasy saga?</h4>

    <div class="answer-boxes">
        <input type="radio" name="q6"class="radio-button" id="correct6"> <em>The Dark Tower</em>
        <input type="radio" name="q6"class="radio-button" id="wrongL"> <em>The Darkest Hour</em>
        <input type="radio" name="q6"class="radio-button" id="wrongM"> <em>The Dark Knight</em>
        <input type="radio" name="q6"class="radio-button" id="wrongN"> <em>The Dark Travels</em>
    </div>

    <h4>Which of the below is a Stephen King pseudonym?</h4>

    <div class="answer-boxes">
        <input type="radio" name="q7" class="radio-button" id="wrongO"> Dick Hallorann
        <input type="radio" name="q7" class="radio-button" id="correct7"> Richard Bachman
        <input type="radio" name="q7" class="radio-button" id="wrongP"> Sam Paul
        <input type="radio" name="q7" class="radio-button" id="wrongQ"> Benjamin Sanders
    </div>

    <h4>One of Stephen King's jobs prior to publication was as a high school teacher.</h4>

    <div class="answer-boxes">
        <input type="radio" name="q8" class="radio-button" id="correct8"> True
        <input type="radio" name="q8" class="radio-button" id="wrongR"> Flase
    </div>

<div id="result-screen" class="container">

    <img id="header" src="assets/images/header-image.png" alt="Stephen King Killer Trivia">

    <h1>All Done!</h1>
    <h4>Correct Answers: <div id="correct-answers"></div></h4>
    <h4>Incorrect Answers: <div id="incorrect-answers"></div></h4>
    <h4>Unanswered: <div id="unanswered"></div></h4>

</div>

我从 JS 中删除的唯一代码是answerCheck 函数。

setTimeout 结束后，我希望隐藏游戏屏幕并显示结果屏幕。隐藏、显示、切换代码中的所有工作，直到超时结束。

游戏屏幕隐藏起来，只剩下背景可见。将游戏结束打印到日志的 console.log 运行。控制台中没有错误。

Answer 1

**编辑。好的，我认为 div“游戏屏幕”缺少 html 中的结束 div 标签。我在下面的代码片段中更新了它。

我还注释掉了playerInteract.answerCheck()，因为该函数不在您提到的代码中，并且它会引发错误。

var welcome = $("#welcome-screen")
var gameOver = $("#result-screen")
var game = $("#game-screen")

var playerInteract = {
    correctAnswers: 0,
    incorrectAnswers: 0,
    unanswered: 8,
    seconds: 10,
    //done: false,

    welcome: function() {
        gameOver.toggle();
        game.hide();
    },

    initiate: function() {
        welcome.hide();
        game.show();
        playerInteract.timer();
    },

    timer: function() {
        var windowTimeout = setTimeout(function() {
            //playerInteract.gameOver() 
            game.hide()
               //playerInteract.answerCheck();
               playerInteract.gameOverLoad();
            },  10000);
        var intervalVariable = setInterval(playerInteract.decrement, 1000);
        var seconds = playerInteract.seconds;

    },  

    decrement: function () {
        if (playerInteract.seconds >= 2) {
                playerInteract.seconds--;
                console.log("seconds: " + playerInteract.seconds);
                $("#countdown").text(playerInteract.seconds);
            }
    },
   gameOverLoad: function() {
       gameOver.show();
       console.log("gameover");
   }

};


window.onload = playerInteract.welcome;

$("#start-button").on("click", function(event) {
    //event.preventDefault()
    playerInteract.initiate()
});

$("#countdown").text(playerInteract.seconds); 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="welcome-screen" class="container">

    <img id="header" src="assets/images/header-image.png" alt="Stephen King Killer Trivia">
    <h1>Take a stab at it!</h1>
    <button id=start-button><h2>STAB!</h2></button>

</div>

<div id="game-screen" class="container">
    <img id="header" src="assets/images/header-image.png" alt="Stephen King Killer Trivia">

    <h2>Take a stab at it!</h2>
    <h3>Time Remaining: <div id="countdown"></div></h3>

    <img id="penny" src="assets/images/penny.png" alt="Pennywise the clown.">

    <h4>What's the name of the killer clown in Stephen King's novel, <em>IT</em>?</h4>

        <div class="answer-boxes">
            <input type="radio" name="q1" class="radio-button" id="wrongA"> Torchy
            <input type="radio" name="q1" class="radio-button" id="wrongB"> Quarterdumb
            <input type="radio" name="q1" class="radio-button" id="correct1"> Pennywise
            <input type="radio" name="q1" class="radio-button" id="wrongC"> Boinko
        </div>

    <img id="georgie" src="assets/images/georgie.png" alt="Georgie from 'It'">

    <h4>Which King protagonist went crazy and killed<br> most of her classmates and teachers during prom?</h4>

    <div class="answer-boxes">
        <input type="radio" name="q2" class="radio-button" id="wrongD"> Sandy
        <input type="radio" name="q2" class="radio-button" id="wrongE"> Dolores
        <input type="radio" name="q2" class="radio-button" id="wrongF"> Sherrie
        <input type="radio" name="q2" class="radio-button" id="correct2"> Carrie
        </div>

    <h4>Stephen King regularly contributed to <em>Dave's Rag</em> in high school.</h4>

    <div class="answer-boxes">
        <input type="radio" name="q3" class="radio-button" id="correct3"> True
        <input type="radio" name="q3" class="radio-bitton" id="wrongG"> False
        </div>

    <h4>What year and model car was featured <br>in the movie <em>Christine</em> based on a Stephen King book?</h4>

    <div class="answer-boxes">
        <input type="radio" name="q4" class="radio-button" id="wrongH"> 1962 Ford Mustang
        <input type="radio" name="q4" class="radio-button" id="wrongI"> 1957 Chevy Chevelle
        <input type="radio" name="q4" class="radio-button" id="wrongJ"> 1951 Jaquar XK 120
        <input type="radio" name="q4" class="radio-button" id="corrcet4"> 1958 Plymouth Fury
        </div>

    <h4>Mike Hanlon made seven phone calls in Stephen King's novel, <em>IT</em>.</h4>

    <div class="answer-boxes">
        <input type="radio" name="q5" class="radio-button" id="wrongK"> True
        <input type="radio" name="q5" class="radio-button" id="correct5"> False
    </div>

    <h4>Wha's the name of Stephen King's western/fantasy saga?</h4>

    <div class="answer-boxes">
        <input type="radio" name="q6"class="radio-button" id="correct6"> <em>The Dark Tower</em>
        <input type="radio" name="q6"class="radio-button" id="wrongL"> <em>The Darkest Hour</em>
        <input type="radio" name="q6"class="radio-button" id="wrongM"> <em>The Dark Knight</em>
        <input type="radio" name="q6"class="radio-button" id="wrongN"> <em>The Dark Travels</em>
    </div>

    <h4>Which of the below is a Stephen King pseudonym?</h4>

    <div class="answer-boxes">
        <input type="radio" name="q7" class="radio-button" id="wrongO"> Dick Hallorann
        <input type="radio" name="q7" class="radio-button" id="correct7"> Richard Bachman
        <input type="radio" name="q7" class="radio-button" id="wrongP"> Sam Paul
        <input type="radio" name="q7" class="radio-button" id="wrongQ"> Benjamin Sanders
    </div>

    <h4>One of Stephen King's jobs prior to publication was as a high school teacher.</h4>

    <div class="answer-boxes">
        <input type="radio" name="q8" class="radio-button" id="correct8"> True
        <input type="radio" name="q8" class="radio-button" id="wrongR"> Flase
    </div>

</div><!-- #game-screen -->


<div id="result-screen" class="container">

    <img id="header" src="assets/images/header-image.png" alt="Stephen King Killer Trivia">

    <h1>All Done!</h1>
    <h4>Correct Answers: <div id="correct-answers"></div></h4>
    <h4>Incorrect Answers: <div id="incorrect-answers"></div></h4>
    <h4>Unanswered: <div id="unanswered"></div></h4>

</div>