我已经遍历了代码。我试图用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);
＆LT; ---- ---- HTML＆GT;
<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结束后，我希望隐藏游戏屏幕并显示结果屏幕。隐藏，显示，切换代码中的所有工作，直到超时结束。
游戏画面隐藏，让背景成为唯一可见的东西。用于打印gameover到日志的console.log运行。控制台中没有错误。
答案 0 :(得分：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>
答案 1 :(得分：0)
没有任何错误，并且在您进行了这些更改之后它现在正在运行。