2016-11-13 176 views
-1

我怎样才能得到相同的结果无需点击结果按钮 这里测验结束后,就是我已经试过我怎样才能从另一个调用JS函数文件

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{ 
 
\t font-size: 24px; 
 
\t background-color: #3399FF; 
 
\t color: #FFF; 
 
\t padding: 20px; 
 

 
} 
 

 
.options li{ 
 
\t font-size: 18px; 
 
} 
 
form { 
 
\t width: 80%; 
 
\t margin: 0 auto; 
 
\t 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"> 
 
\t <p>1. Which of the following is not a moving violation?</p> 
 
\t <ol type="A" class="options"> 
 
\t \t <li><input class="option" type="radio" name="q1" value="Double Parking">Double Parking</li> 
 
\t \t <li><input class="option" type="radio" name="q1" value="Tailgating">Tailgating</li> 
 
\t \t <li><input class="option" type="radio" name="q1" value="Speeding">Speeding</li> 
 
\t \t <li><input class="option" type="radio" name="q1" value="Failing to signal a turn">Failing to signal a turn</li> 
 
\t </ol> 
 
</div> 
 

 
<div class="questions"> 
 
\t <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> 
 
\t <ol type="A" class="options">    
 
\t \t <li><input class="option" type="radio" name="q2" value="The aplicant must take the test again">The aplicant must take the test again</li>   
 
\t \t <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> 
 
\t \t <li><input class="option" type="radio" name="q2" value="The aplicant will have to drive carfolly">The aplicant will have to drive carfolly</li>  
 
\t </ol> 
 
</div> 
 
       
 
<div class="questions"> 
 
\t <p>3. In wich situation may you pass a school bus with the red flashing light on?</p>   
 
\t <ol type="A" class="options">    
 
\t \t <li><input class="option" type="radio" name="q3" value="When it is snowing">When it is snowing</li>    
 
\t \t <li><input class="option" type="radio" name="q3" value="When you do not see children around">When you do not see children around</li>    
 
\t \t <li><input class="option" type="radio" name="q3" value="When someon behind beeps the horn">When someon behind beeps the horn</li>   
 
\t \t <li><input class="option" type="radio" name="q3" value="Never">Never<br/>  
 
\t </ol> 
 
</div> 
 

 
<div class="questions"> 
 
\t <p>4. Wich of the following is a service animal?</p> 
 
\t <ol type="A" class="options"> 
 
\t \t <li><input class="option" type="radio" name="q4" value="A seeing eye dog">A seeing eye dog</li> 
 
\t \t <li><input class="option" type="radio" name="q4" value="A guide dog">Aguide dog</li> 
 
\t \t <li><input class="option" type="radio" name="q4" value="A signal dog">A signal dog</li> 
 
\t \t <li><input class="option" type="radio" name="q4" value="All of the above">All of the above</li> 
 
\t </ol> 
 
</div> 
 

 
<div class="questions"> 
 
\t <p>5. Which of the following is not a For-Hire base?</p> 
 
\t <ol type="A" class="options"> 
 
\t \t <li><input class="option" type="radio" name="q5" value="Yellow taxi medallion base">Yellow taxi medallion base</li> 
 
\t \t <li><input class="option" type="radio" name="q5" value="Black car base">Black car base</li> 
 
\t \t <li><input class="option" type="radio" name="q5" value="Livery car service base station">Livery car service base station</li> 
 
\t \t <li><input class="option" type="radio" name="q5" value="Luxury limousine base">Luxury limousine base</li> 
 
\t </ol> 
 
</div> 
 

 
<div class="questions"> 
 
\t <p>6. Wich of the following is not correct?</p> 
 
\t <ol type="A" class="options"> 
 
\t \t <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> 
 
\t \t <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> 
 
\t \t <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> 
 
\t \t <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> 
 
\t </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

你能澄清究竟发生了什么问题吗?您是否在错误控制台中看到任何错误?你现在用什么方法从另一个JS文件中调用函数?你的头衔表明你在问如何去做,但你的问题似乎是关于别的。 –

+0

只需更改:getScore(this.form);'getScore($('form')[0]);'。 –

+0

我们非常感谢您的帮助,谢谢。正是我想要的。 –

回答

0

里面一个jQuery事件函数指事件是有线的元素。因此,您需要引用document.form [0],或使用相同的jQuery版本。

1

您需要将表单元素传递给您的getScore()函数,但this.form不表示代码中该位置的表单元素,因为它位于传递给$questions.get(currentQuestion)).fadeOut()的回调函数中。此时this涉及问题元素。即使您在此时对按钮元素有引用,也无法从中获取表单,因为该按钮已从页面中删除。

你可以保持一个参考表单元素的变量,其中this确实涉及到按钮元素:

$('#next').click(function() { 
    var form = this.form; 

然后使用电话getScore()时:

getScore(form); 
1

this是按钮。使用closest()遍历它是内

形式尝试

getScore($(this).closest('form')[0]); 

或者更简单的,给予形式的ID

<form id="myForm> 

,并使用该ID的目标形式

getScore($('#myForm')[0]); 
相关问题