我正在为我的学校作业做一个琐事游戏，我发誓我已经做了一切事情来解决我遇到的问题。本质上，在不浪费您太多时间的情况下，我使用.show（）和.hide（）的jQuery方法在游戏的不同阶段之间进行转换。但是，每当我通过按钮单击功能提示游戏开始时，屏幕都会快速“闪烁”本应显示的内容，然后返回到“开始”屏幕。我对此无能为力，任何帮助将不胜感激。
$(document).ready(function() {
//set up variables for game
var timer = 45;
var correctCount = 0;
var wrongCount = 0;
var endGame = false;
//capturing responses from user input
var question1Capture = $("input[name='question1']:checked").val();
var question2Capture = $("input[name='question2']:checked").val();
var question3Capture = $("input[name='question3']:checked").val();
var question4Capture = $("input[name='question4']:checked").val();
var question5Capture = $("input[name='question5']:checked").val();
var question6Capture = $("input[name='question6']:checked").val();
var question7Capture = $("input[name='question7']:checked").val();
var question8Capture = $("input[name='question8']:checked").val();
var question9Capture = $("input[name='question9']:checked").val();
var question10Capture = $("input[name='question10']:checked").val();
//!! If extra time, add audio queues here!!
// !!----------------
// setting timeout
setTimeout(timerCountDown, 1000 * 45);
//functions
function timerCountDown() {
timer--;
$("#timeLeft").text("Time Left: " + timer + " seconds");
if (timer === 0) {
endGame === true;
}
console.log(timer);
}
//function to start the game
function gameStart() {
$(".playScreen").show();
$(".bannerScreen").show();
$(".startScreen").hide();
$(".endScreen").hide();
timerCountDown();
}
//function for when the game ends
function gameOver() {
$(".playScreen").hide();
$(".bannerScreen").hide();
$(".startScreen").hide();
$(".endScreen").show();
}
//function to initialize the screen before the user presses the button
function initializeScreen () {
$(".playScreen").hide();
$(".bannerScreen").hide();
$(".endScreen").hide();
$(".startScreen").show();
}
//function for going through responses
function responseCheck() {
// question 1
if (question1Capture === 1) {
console.log("correct");
correctCount++;
$("#correctCountDiv").text("Correct Answers: " + correctCount);
}
else {
console.log("incorrect");
wrongCount++;
$("#wrongCountDiv").text("Wrong Answers: " + wrongCount);
}
//question 2
if (question2Capture === 1) {
console.log("correct");
correctCount++;
$("#correctCountDiv").text("Correct Answers: " + correctCount);
}
else {
console.log("incorrect");
wrongCount++;
$("#wrongCountDiv").text("Wrong Answers: " + wrongCount);
}
//question 3
if (question3Capture === 1) {
console.log("correct");
correctCount++;
$("#correctCountDiv").text("Correct Answers: " + correctCount);
}
else {
console.log("incorrect");
wrongCount++;
$("#wrongCountDiv").text("Wrong Answers: " + wrongCount);
}
//question 4
if (question4Capture === 1) {
console.log("correct");
correctCount++;
$("#correctCountDiv").text("Correct Answers: " + correctCount);
}
else {
console.log("incorrect");
wrongCount++;
$("#wrongCountDiv").text("Wrong Answers: " + wrongCount);
}
//question 5
if (question5Capture === 1) {
console.log("correct");
correctCount++;
$("#correctCountDiv").text("Correct Answers: " + correctCount);
}
else {
console.log("incorrect");
wrongCount++;
$("#wrongCountDiv").text("Wrong Answers: " + wrongCount);
}
//question 6
if (question6Capture === 1) {
console.log("correct");
correctCount++;
$("#correctCountDiv").text("Correct Answers: " + correctCount);
}
else {
console.log("incorrect");
wrongCount++;
$("#wrongCountDiv").text("Wrong Answers: " + wrongCount);
}
//question 7
if (question7Capture === 1) {
console.log("correct");
correctCount++;
$("#correctCountDiv").text("Correct Answers: " + correctCount);
}
else {
console.log("incorrect");
wrongCount++;
$("#wrongCountDiv").text("Wrong Answers: " + wrongCount);
}
//question 8
if (question8Capture === 1) {
console.log("correct");
correctCount++;
$("#correctCountDiv").text("Correct Answers: " + correctCount);
}
else {
console.log("incorrect");
wrongCount++;
$("#wrongCountDiv").text("Wrong Answers: " + wrongCount);
}
//question 9
if (question9Capture === 1) {
console.log("correct");
correctCount++;
$("#correctCountDiv").text("Correct Answers: " + correctCount);
}
else {
console.log("incorrect");
wrongCount++;
$("#wrongCountDiv").text("Wrong Answers: " + wrongCount);
}
//question 10
if (question10Capture === 1) {
console.log("correct");
correctCount++;
$("#correctCountDiv").text("Correct Answers: " + correctCount);
}
else {
console.log("incorrect");
wrongCount++;
$("#wrongCountDiv").text("Wrong Answers: " + wrongCount);
}
}
//calling initializeScreen function
initializeScreen();
//start game click event
$("#startButton").on("click", function() {
gameStart();
responseCheck();
if (endGame) {
console.log("times up!")
gameOver();
}
});
//if the submit button is pressed before the time runs out
$("#submitButton").on("click", gameOver);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title> Poke-Trivia </title>
<!--Meta-Viewport tag-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--jQuery Link-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!--javascript link-->
<script src="assets/javascript/app.js"></script>
<!--CSS link-->
<link href="assets/css/style.css" rel="stylesheet">
<!--Google Fonts link-->
<link href="https://fonts.googleapis.com/css?family=Oregano|Sedgwick+Ave" rel="stylesheet">
</head>
<body>
<h1> Pokemon Trivia </h1>
<form>
<!--START SCREEN BEGINS-->
<div class="startScreen">
<h2> Press the Pokeball to start! </h2>
<button id="startButton"></button>
</div>
<!--END OF START SCREEN-->
<h2 class="bannerScreen"> Answer 'em All ! </h2>
<h2 class="bannerScreen" id="timeLeft"> Time Left: 45 seconds </h3>
<!--START OF QUESTIONS-->
<div class="playScreen">
<p> Question 1: What is HM04 in GEN 1 (Red/Blue/Yellow)? </p>
<hr>
<div>
<input type="radio" name="question1" value="0" id="1A">
<label for="1A"> Cut </label>
<input type="radio" name="question1" value="0" id="1B">
<label for="1B"> Surf </label>
<input type="radio" name="question1" value="1" id="1C">
<label for="1C"> Strength </label>
<input type="radio" name="question1" value="0" id="1D">
<label for="1D"> Rock Smash </label>
</div>
<br>
<p> Question 2: Who is the Gym Leader of Fuschia City in GEN 2/4 (Silver/Gold/Diamond/Pearl/Platinum)?</p>
<hr>
<div>
<input type="radio" name="question2" value="0" id="2A">
<label for="2A"> Chuck </label>
<input type="radio" name="question2" value="0" id="2B">
<label for="2B"> Koga </label>
<input type="radio" name="question2" value="0" id="2C">
<label for="2C"> Whitney </label>
<input type="radio" name="question2" value="1" id="2D">
<label for="2D"> Janine </label>
</div>
<br>
<p> Question 3: Which Water-type Pokemon was a "Starter" for GEN 2/4 (Silver/Gold/Diamond/Pearl/Platinum)?</p>
<hr>
<div>
<input type="radio" name="question3" value="1" id="3A">
<label for="3A"> Totodile </label>
<input type="radio" name="question3" value="0" id="3B">
<label for="3B"> Oshawott </label>
<input type="radio" name="question3" value="0" id="3C">
<label for="3C"> Piplup </label>
<input type="radio" name="question3" value="0" id="3D">
<label for="3D"> Mudkip </label>
</div>
<br>
<p> Question 4: How many Legendary Pokemon were introduced in GEN 3 (Ruby/Sapphire/Emerald)?</p>
<hr>
<div>
<input type="radio" name="question4" value="0" id="4A">
<label for="4A"> 3 </label>
<input type="radio" name="question4" value="1" id="4B">
<label for="4B"> 8 </label>
<input type="radio" name="question4" value="0" id="4C">
<label for="4C"> 6 </label>
<input type="radio" name="question4" value="0" id="4D">
<label for="4D"> 2 </label>
</div>
<br>
<p> Question 5: In what region did GEN 6 (X/Y) take place?</p>
<hr>
<div>
<input type="radio" name="question5" value="0" id="5A">
<label for="5A"> Johto </label>
<input type="radio" name="question5" value="0" id="5B">
<label for="5B"> Unova </label>
<input type="radio" name="question5" value="1" id="5C">
<label for="5C"> Kalos </label>
<input type="radio" name="question5" value="0" id="5D">
<label for="5D"> Sinnoh </label>
</div>
<br>
<p> Question 6: In GEN 7 (Sun/Moon), what "notable" exclusion was present in the game, when compared to its predecessors?</p>
<hr>
<div>
<input type="radio" name="question6" value="1" id="6A">
<label for="6A"> Bicycles </label>
<input type="radio" name="question6" value="0" id="6B">
<label for="6B"> Rare Candies </label>
<input type="radio" name="question6" value="0" id="6C">
<label for="6C"> Pokemon Daycare </label>
<input type="radio" name="question6" value="0" id="6D">
<label for="6D"> A Rival </label>
</div>
<br>
<p> Question 7: In which year did the first ever Pokemon movie, featuring Mewtwo and Mew, release? </p>
<hr>
<div>
<input type="radio" name="question7" value="0" id="7A">
<label for="7A"> 1998 </label>
<input type="radio" name="question7" value="1" id="7B">
<label for="7B"> 1999 </label>
<input type="radio" name="question7" value="0" id="7C">
<label for="7C"> 2000 </label>
<input type="radio" name="question7" value="0" id="7D">
<label for="7D"> 2001 </label>
</div>
<br>
<p> Question 8: TRUE OR FALSE: Mark Hamill, of Star Wars fame, provided the voice of Entei in Pokemon 3: The Movie? </p>
<hr>
<div>
<input type="radio" name="question8" value="0" id="8A">
<label for="8A"> True </label>
<input type="radio" name="question8" value="1" id="8B">
<label for="8B"> False </label>
</div>
<br>
<p> Question 9: Is it possible to teach "Fly" to Scyther (Bug, Flying type)? </p>
<hr>
<div>
<input type="radio" name="question9" value="0" id="9A">
<label for="9A"> Yes, he does have wings after all. </label>
<input type="radio" name="question9" value="1" id="9B">
<label for="9B"> No, Game Freak hates him. </label>
</div>
<br>
<p> Question 10: How many current, potential evolutions are there for Evee? </p>
<hr>
<div>
<input type="radio" name="question10" value="0" id="10A">
<label for="10A"> 5 </label>
<input type="radio" name="question10" value="0" id="10B">
<label for="10B"> 6 </label>
<input type="radio" name="question10" value="0" id="10C">
<label for="10C"> 7 </label>
<input type="radio" name="question10" value="1" id="10D">
<label for="10D"> 8 </label>
</div>
<br>
<button id="submitButton" type="submit">Submit Answers</button>
</div>
<!-- End of Questions -->
<!-- Start of End Screen -->
<div class="endScreen">
<h2> Here are your results </h2>
<hr id="endScreenHr">
<h2 id="correctCountDiv"> Correct Answers: </h2>
<h2 id="wrongCountDiv"> Wrong Answers: </h2>
</div>
<!-- End of End Screen -->
</form>
</body>
</html>
答案 0 :(得分：0)
将button type从submit更改为button
<button id="submitButton" type="button">Submit Answers</button>
答案 1 :(得分：-1)
我的解决方案是将event.preventDefault();放在点击功能之后，以防止表单自然刷新页面。