如何在测验结束后不点击“结果”按钮就能获得相同的结果 这是我试过的
if (currentQuestion == totalQuestions) {
var outputDiv = document.getElementById("quizEnds");
outputDiv.innerHTML = "You have reached the final question.";
$('#next').remove();
getScore(this.form);
}
它不起作用。请有人指出错误。它必须是两个分开的文件。谢谢
//quizeffect.js
var totalQuestions = $('.questions').size();
var currentQuestion = 0;
$questions = $('.questions');
$questions.hide();
$($questions.get(currentQuestion)).fadeIn();
$('#next').click(function () {
$($questions.get(currentQuestion)).fadeOut(function () {
currentQuestion = currentQuestion + 1;
if (currentQuestion == totalQuestions) {
var outputDiv = document.getElementById("quizEnds");
outputDiv.innerHTML = "<h2>You have reached the final question.</h2>";
$('#next').remove();
getScore(this.form);
} else {
$($questions.get(currentQuestion)).fadeIn();
}
});
});
//tlcquizzapp.js
/*====================app js====================*/
var numberOfQuestions = 6;
// Insert number of choices in each question
var numberOfChoices = 4;
var rightAnswers = 0;
var correct = [];
var wrong =[];
var answers = new Array("Double Parking",
"The aplicant will have the aplication denied", "Never", "All of the above",
"Yellow taxi medallion base", "You are allowed to pick up in the crosswalk if the passenger is standing at the intersection");
function print(message) {
var outputDiv = document.getElementById("output");
outputDiv.innerHTML = message;
}
function buildList(arr) {
var listHTML = '<ol>';
for (var i = 0; i < arr.length; i++) {
listHTML += '<li>' + arr[i] + '</li>';
}
listHTML += '</ol>';
return listHTML;
}
// Do not change anything below here ...
function getScore(form) {
var score = 0;
var currElt;
var currSelection;
for (i = 0; i < numberOfQuestions; i++) {
currElt = i * numberOfChoices;
for (j = 0; j < numberOfChoices; j++) {
currSelection = form.elements[currElt + j];
if (currSelection.checked) {
if (currSelection.value == answers[i]) {
score++;
correct.push(currSelection.value);
}
else{
wrong.push(currSelection.value);
}
}
}
}
score = Math.round(score/numberOfQuestions*100);
var userAnswers = '<p>You got ' + score + ' % on your test.</p>';
userAnswers += '<h2>You got these answers correct:</h2>';
userAnswers += buildList(correct);
userAnswers += '<h2>You got these answers wrong</h2>';
userAnswers += buildList(wrong);
print(userAnswers);
}
.questions p{
font-size: 24px;
background-color: #3399FF;
color: #FFF;
padding: 20px;
}
.options li{
font-size: 18px;
}
form {
width: 80%;
margin: 0 auto;
border: 1px solid #DDD;
}
button {
border: none;
padding: 10px;
border-radius: 10px;
background-color: #3399FF;
color: #FFF;
}
button:hover {
background-color: orange;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TLC Driver Practice Quiz</title>
<link rel="stylesheet" href="css/tlc-style.css">
</head>
<body>
<div><h1>TLC Practice Quiz</h1></div>
<form>
<div class="questions">
<p>1. Which of the following is not a moving violation?</p>
<ol type="A" class="options">
<li><input class="option" type="radio" name="q1" value="Double Parking">Double Parking</li>
<li><input class="option" type="radio" name="q1" value="Tailgating">Tailgating</li>
<li><input class="option" type="radio" name="q1" value="Speeding">Speeding</li>
<li><input class="option" type="radio" name="q1" value="Failing to signal a turn">Failing to signal a turn</li>
</ol>
</div>
<div class="questions">
<p>2. What is the penalty for an aplicant of an TLC driver's license who test positive for drugs and fails the drug test?</p>
<ol type="A" class="options">
<li><input class="option" type="radio" name="q2" value="The aplicant must take the test again">The aplicant must take the test again</li>
<li><input class="option" type="radio" name="q2" value="The aplicant will have a provationary license">The aplicant will have a provationary license</li><li><input class="option" type="radio" name="q2" value="The aplicant will have the aplication denied">The aplicant will have the aplication denied</li>
<li><input class="option" type="radio" name="q2" value="The aplicant will have to drive carfolly">The aplicant will have to drive carfolly</li>
</ol>
</div>
<div class="questions">
<p>3. In wich situation may you pass a school bus with the red flashing light on?</p>
<ol type="A" class="options">
<li><input class="option" type="radio" name="q3" value="When it is snowing">When it is snowing</li>
<li><input class="option" type="radio" name="q3" value="When you do not see children around">When you do not see children around</li>
<li><input class="option" type="radio" name="q3" value="When someon behind beeps the horn">When someon behind beeps the horn</li>
<li><input class="option" type="radio" name="q3" value="Never">Never<br/>
</ol>
</div>
<div class="questions">
<p>4. Wich of the following is a service animal?</p>
<ol type="A" class="options">
<li><input class="option" type="radio" name="q4" value="A seeing eye dog">A seeing eye dog</li>
<li><input class="option" type="radio" name="q4" value="A guide dog">Aguide dog</li>
<li><input class="option" type="radio" name="q4" value="A signal dog">A signal dog</li>
<li><input class="option" type="radio" name="q4" value="All of the above">All of the above</li>
</ol>
</div>
<div class="questions">
<p>5. Which of the following is not a For-Hire base?</p>
<ol type="A" class="options">
<li><input class="option" type="radio" name="q5" value="Yellow taxi medallion base">Yellow taxi medallion base</li>
<li><input class="option" type="radio" name="q5" value="Black car base">Black car base</li>
<li><input class="option" type="radio" name="q5" value="Livery car service base station">Livery car service base station</li>
<li><input class="option" type="radio" name="q5" value="Luxury limousine base">Luxury limousine base</li>
</ol>
</div>
<div class="questions">
<p>6. Wich of the following is not correct?</p>
<ol type="A" class="options">
<li><input class="option" type="radio" name="q6" value="When you pick up a passenger, the vehicle should be 12 inches from yhe curb">When you pick up a passenger, the vehicle should be 12 inches from yhe curb</li>
<li><input class="option" type="radio" name="q6" value="When you pick up a passenger, the vehicle should be parallel to the curb">When you pick up a passenger, the vehicle shouldbe parallel to the curb</li>
<li><input class="option" type="radio" name="q6" value="If the passenger is waiting next to a car that is already parked, you should look for space within 100 ft.">If the passenger is waiting next to a car that is already parked, you should look for space within 100 ft.</li>
<li><input class="option" type="radio" name="q6" value="You are allowed to pick up in the crosswalk if the passenger is standing at the intersection">You are allowed to pick up in the crosswalk if the passenger is standing at the intersection</li>
</ol>
</div>
<div id="quizEnds"></div>
<button type="button" name="nextButton" id='next' value="Next">Next</button>
<button class="results" type="button" value="Results" onClick="getScore(this.form);">Results</button>
<!-- <button type="reset" value="Clear Answers">Clear Answers</button> -->
<div id="output"></div>
</form>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/tlcquizzapp.js"></script>
<script type="text/javascript" src="js/quizeffect.js"></script>
</body>
</html>
答案 0 :(得分：1)
您需要将表单元素传递给getScore()函数，但this.form不代表代码中该位置的表单元素，因为它位于传递给{{1}的回调函数内部}。此时$questions.get(currentQuestion)).fadeOut()引用了问题元素。即使你在该点有一个对按钮元素的引用，也无法从中获取该表单，因为该按钮已从页面中删除。
您可以在this引用按钮元素的变量中保留对表单元素的引用：
this然后在调用$('#next').click(function () {
var form = this.form;
时使用它：
getScore()答案 1 :(得分：1)
this是按钮。使用closest()遍历
尝试
getScore($(this).closest('form')[0]);
或者更简单，给表单一个id
<form id="myForm>
并使用该ID来定位表格
getScore($('#myForm')[0]);
答案 2 :(得分：0)
在jQuery事件函数中，指的是事件连接到的元素。因此，您需要参考document.form [0]，或使用相同的jQuery版本。