我目前正在做一个作业，我必须创建一个测验。我似乎无法弄清楚为什么每次尝试提交答案时DOM都会刷新。我相信event.preventDefault（）应该是解决方案，但仍然无法正常工作。表格有问题吗？
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Eagles Quiz</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" type="text/css" href="wire.css"/>
</head>
<body class="flex-c">
<header class="flex-c">
<section>
<img class="city" src="img/philaskyline.jpg" alt="Philadelphia Skyline">
</section>
<section>
<h1>Philadelphia Eagles Quiz</h1>
</section>
</header>
<main class="flex-c">
<section class="box">
<h2>Prove You're the #1 Eagles Fan</h2>
<section class="image">
<img src="img/logo.jpg" alt="Eagles Logo" class="container-img">
</section>
<section class="js-button">
<button type="button" class="js-start">Start</button>
</section>
</section>
<section class="js-progress">
</section>
</main>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.js"></script>
<script src="index.js"></script>
</body>
</html>
Javascript
{
question: "What was the Philadelphia Eagles first year in the NFL?",
options: [
"1933",
"1956",
"1941",
"1945"
],
answer: "1933"
},
//2
{
question: "Who is the Eagles all time leading passer",
options: [
"Randall Cuningham",
"Norm Van Brocklin",
"Donovan McNabb",
"Ron Jaworski"
],
answer: "Donovan McNabb"
},
//3
{
question: "Which Philadelphia Eagle was the first player in NFL history to record a sack, fumble recovery, TD, and an interception in the same game?",
options: [
"Reggie White",
"Andre Waters",
"Chuck Bednarik",
"Brian Dawkins"
],
answer: "Brian Dawkins"
},
//4
{
question: "Nick Foles shares the NFL record for TD passes in a single game. What is the record",
options: [
"8",
"7",
"5",
"4"
],
answer: "7"
},
//5
{
question: "What is the name of the Eagles mascot?",
options: [
"Swoop",
"Baldy",
"Aquila",
"Franklin"
],
answer: "Swoop"
},
//6
{
question: "What was the first Super Bowl appearance for the Eagles",
options: [
"Super Bowl XV",
"Super Bowl XI",
"Super Bowl XXXIX",
"Super Bowl XXIV"
],
answer: "Super Bowl XV"
},
//7
{
question: "Who did the Eagles play in Super Bowl XXXIX",
options: [
"Indianapolis Colts",
"New England Patriots",
"Baltimore Ravens",
"Pittsburgh Steelers"
],
answer: "New England Patriots"
},
//8
{
question: "Who was the first Eagles running back to toal more than 1,000 yard rushing in a season?",
options: [
"Wilbert Montgomery",
"Lesean McCoy",
"Steve Van Buren",
"Brian Westbrook"
],
answer: "Steve Van Buren"
},
//9
{
question: "Which former Eagle was the inspiration for the movie “Invincible”?",
options: [
"Jerome Brown",
"Sonny Jurgense",
"Tommy McDonald",
"Vince Papale"
],
answer: "Vince Papale"
},
//10
{
question: "Which Eagle was the last full-time two-way player in NFL history?",
options: [
"Pete Retzlaff",
"Pete Pihos",
"Al Wistert",
"Chuck Bednarik"
],
answer: "Chuck Bednarik"
}
];
const currentQuestionNumber= 0;
const score= 0;
//This function load quiz
function startQuiz(){
$('.start').on('click', function(event){
renderQuestion();
});
}
//This function renders question
function renderQuestion(){
let questionText= STORE[currentQuestionNumber];
let questionHtml= `<form><fieldset>
<legend>${questionText.question}</legend>
<input type="radio" id="${questionText.options[0]}" value="${questionText.options[0]}"name="answer" required>
<label for="${questionText.options[0]}">${questionText.options[0]}</label><br/>
<input type="radio" id="${questionText.options[1]}" value="${questionText.options[1]}"name="answer" required>
<label for="${questionText.options[1]}">${questionText.options[1]}</label><br/>
<input type="radio" id="${questionText.options[2]}" value="${questionText.options[2]}" name="answer" required>
<label for="${questionText.options[2]}">${questionText.options[2]}</label></br>
<input type="radio" id="${questionText.options[3]}" value="${questionText.options[3]}" name="answer" required>
<label for="${questionText.options[3]}">${questionText.options[3]}</label><br>
<button type="submit" class="js-button">Submit</button>
</fieldset>
</form>`;
$('.box').html(questionHtml);
}
//this function check answer
function checkAnswer(){
$('main').on('submit', '.submit', function(event){
event.preventDefault();
let selected= $('input:checked')
let answer= selected.val();
let correct= STORE[currentQuestionNumber].answer;
if (answer===correct){
correctAnswer();
} else {
wrongAnswer();
}
});
}
//displays html when answer is correct
function correctAnswer(){
const correct= `<h2>It's Good!</h2>
<section class="image">
<img src="img/td.jpg" alt="referee signaling touchdown" class="container-img">
</section>
<section class="js-button">
<button type="button" class="js-next">Next</button>
</section>`
$('.box').html(correct);
score++;
}
//displays html when answer is wrong
function wrongAnswer(){
const wrong= `<h2>No good!</h2>
<section class="image">
<img src="img/missed.jpg" alt="david akers on knees after missing field goal" class="container-img">
</section>
<section class="js-button">
<button type="button" class="js-next">Next</button>
</section>`
$('.box').html(wrong);
}
function domReady(){
startQuiz();
checkAnswer();
nextQuestion();
renderQuestion();
wrongAnswer();
correctAnswer();
};
$(domReady);
感谢您的帮助。谢谢
尝试一下：
function checkAnswer(){
$('.box').on('submit', '.js-button', function(event){
event.preventDefault();
let selected= $('input:checked');
let answer= selected.val();
let correct= STORE[currentQuestionNumber].answer;
if (answer===correct){
correctAnswer();
} else {
wrongAnswer();
}
return false;
});
}