【发布时间】：2020-04-17 16:37:08
【问题描述】：
我正在创建一个游戏，我正在使用单选按钮表单。当用户选择正确答案和错误答案时，我使用 jQuery 设置警报。当用户选择错误答案时，警报会起作用，但当用户选择正确答案时，jQuery 将运行整个脚本。我想也许单选按钮中的字符串与 Jquery 不匹配，所以我更改了它，但没有用。我尝试添加变量并使其匹配，但这与其他一些重写都不起作用，但我一直遇到同样的问题。我不知道我错过了什么，感谢您的时间和帮助。
var skit = "In Living Color";
var girlPower = "Spice Girls";
var boyBand = "AJ, Brian, Nick, Kevin & Howie";
var tvShow = "Martin";
var nba = "Chicago Bulls";
var nfl = "New Orleans, Superdome";
var film = "Titanic";
window.onload = function() {
event.preventDefault();
$('#Container').hide();
$('#start-btn').on('click', function() {
$('#Container').toggle();
$('#Intro').hide();
$('#Score').hide();
console.log("Quiz has started!");
});
$('#submit-btn').on('click', function() {
Validate();
})
function Validate () {
var skit = $('input[name = "skit"]:checked').val();
console.log("skit!!", skit);
var girlPower = $('input[name = "GP"]:checked').val();
console.log(girlPower);
var boyBand = $('input[name = "BS"]:checked').val();
console.log(boyBand);
var tvShow = $('input[name = "catch"]:checked').val();
console.log(tvShow);
var nba = $('input[name = "NBA"]:checked').val();
console.log(nba);
var nfl = $('input[name = "NFL"]:checked').val();
console.log(nfl);
var film = $('input[name = "film"]:checked').val();
console.log(film);
responses = [skit, girlPower, boyBand, tvShow, nba, nfl, film];
for(i = 0; i < responses.length; i++) {
if (responses[i] === undefined) {
alert("answer all questions please");
return
}
}
if (skit === "In Living Color") {
alert("Answer #1 is correct");
}
else if (skit === "MADTv", skit === "The Brady Bunch", skit === "Saturday Night Live"); {
alert("Answer #1 is wrong = In Living Color");
}
if (girlPower === "Spice Girls") {
alert("Answer #2 is correct");
}
else if (girlPower === "TLC", girlPower === "Destiny's Child", girlPower === "Dixie Chicks"); {
alert("Answer #2 is wrong = Spice Girls");
}
if (boyBand === "AJ, Brian, Nick, Kevin & Howie") {
alert("Answer #3 is correct");
}
else if (boyBand === "Justin, JC, Lance, Joey & Chris", boyBand === "Nick, Jeff, Drew & Justin",
boyBand === "Mark, Travis & Tom"); {
alert("Answer #3 is wrong = AJ, Brian, Nick, Kevin & Howie");
}
if (tvShow === "Martin") {
alert("Answer #4 is correct");
}
else if (tvShow === "Moesha", tvShow === "Friends", tvShow === "Sex and The City"); {
alert("Answer #4 is wrong = Martin");
}
if (nba === "Chicago Bulls") {
alert("Answer #5 is correct");
}
else if (nba === "Houston Rockets", nba === "Los Angeles Lakers", nba === "San Antonio Spurs"); {
alert("Answer #5 is wrong = Chicago Bulls");
}
if (nfl === "New Orleans, Superdome") {
alert ("Answer #6 is correct");
}
else if (nfl === "San Diego, Qualcomm Stadium", nfl === "Miami, Joe Robbie Stadium",
nfl === "Pasadena, Rose Bowl"); {
alert("Answer #6 is wrong = New Orleans, Superdome");
}
if (film === "The Titanic") {
alert("Answer #7 is correct");
}
else if (film === "The Lion King", film === "Jurrasic Park", film === "The Color Purple"); {
alert("Answer #7 is wrong = The Titanic");
}
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!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">
<script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Share+Tech+Mono&display=swap" rel="stylesheet">
<script src="./assets/javascript/game4.js"></script>
<link rel="stylesheet" href="./assets/css/reset.css">
<link rel="stylesheet" href="./assets/css/style4.css">
<title>90's Pop Trivia</title>
</head>
<body>
<div id="Intro">
<h1 id="start">Click the start button to begin the 90's QUIZ</h1>
<br>
<button id="start-btn">Start game</button>
</div>
<div id="Container">
<form class="quizForm" action="" onsubmit="Validate()" method="post">
<p class="Question">What is the name of the skit show started by a famous family?</p>
<input type="radio" name="skit" value="In Living Color"> In Living Color
<input type="radio" name="skit" value="The Brady Bunch"> The Brady Bunch
<input type="radio" name="skit" value="MADTv"> MADTv
<input type="radio" name="skit" value="SNL"> Saturday Night Live
<p class="Question">Which of these iconic girl groups coin the phrase "Girl Power"?</p>
<input type="radio" name="GP" value="Destiny's Child"> Destiny's Child
<input type="radio" name="GP" value="TLC"> TLC
<input type="radio" name="GP" value="Spice Girls"> Spice Girls
<input type="radio" name="GP" value="Dixie Chicks"> Dixie Chicks
<p class="Question">What are the name of the memebers of the boy band Backstreet Boys?</p>
<input type="radio" name="BS" value="Justin, JC, Lance, Joey, Chris"> Justin, JC, Lance, Joey & Chris
<input type="radio" name="BS" value="AJ, Brian, Nick, Kevin, Howie"> AJ, Brian, Nick, Kevin & Howie
<input type="radio" name="BS" value="Nick, Jeff, Drew, Justin"> Nick, Jeff, Drew & Justin
<input type="radio" name="BS" value="Mark, Travis, Tom"> Mark, Travis & Tom
<p class="Question">What tv show had this recongized catach-phrase "GET TO STEPPIN"?</p>
<input type="radio" name="catch" value="Moesha"> Moesha
<input type="radio" name="catch" value="Martin"> Martin
<input type="radio" name="catch" value="Friends"> Friends
<input type="radio" name="catch" value="Sex and The City"> Sex and The City
<p class="Question">Which NBA franchise won the NBA Finals the most from 1990-1999?</p>
<input type="radio" name="NBA" value="Houston Rockets"> Houston Rockets
<input type="radio" name="NBA" value="Los Angeles Lakers"> Los Angeles Lakers
<input type="radio" name="NBA" value="San Antonio Spurs"> San Antonio Spurs
<input type="radio" name="NBA" value="Chicago Bulls"> Chicago Bulls
<p class="Question">The NFL host a championship game called the "Superbowl", Superbowl XXIV was located in what city and stadium in 1990?</p>
<input type="radio" name="NFL" value="New Orleans, Superdome"> New Orleans, Superdome
<input type="radio" name="NFL" value="San Diego, Qualcomm Stadium"> San Diego, Qualcomm Stadium
<input type="radio" name="NFL" value="Miami, Joe Robbie Stadium"> Miami, Joe Robbie Stadium
<input type="radio" name="NFL" value="Pasadena, Rose Bowl"> Pasadena, Rose Bowl
<p class="Question">Which film in the 90's was the highest grossing film of decade?</p>
<input type="radio" name="film" value="The Lion King"> The Lion King
<input type="radio" name="film" value="Jurrasic Park"> Jurrasic Park
<input type="radio" name="film" value="The Color Purple"> The Color Purple
<input type="radio" name="film" value="The Titanic"> The Titanic
</form>
<button id="submit-btn">Submit</button>
<div id="Clock">00:00</div>
<div id="Score">
<p class="Finish">Congrarts! You have finished the 90's Pop Quiz!</p>
<p class="Finish"></p>
</div>
</div>
</body>
</html>【问题讨论】：
-
确保当你创建一个可运行的 sn-p 时它没有任何错误。事件处理程序中的
event并不总是在所有浏览器中定义。并非所有浏览器都将其设为全局变量。如果需要，事件处理程序应该接受传入的事件参数，以便在所有浏览器上保持一致。 -
在
onload处理程序中不需要event.preventDefault()，因为没有默认操作。此外，您从未向函数声明event参数。 -
如果你使用 jQuery，你应该使用
$(document).ready()而不是window.onload。 -
好的，我正在做这些更改并记录这些建议，非常感谢您的帮助！
标签： javascript jquery html validation radio-button