HTML按鈕應該啓動JavaScript和jQuery測驗功能，但沒有發生

Question

嗨，我是新來的JavaScript，但我真的很喜歡它。然而，我在下面的JavaScript代碼中遇到問題，我正在建立並在html頁面上進行測驗。

這個想法是，當頁面加載時，用戶點擊最上面一行上的一個按鈕。然後調用按鈕ID的相關JSON文件，然後'got'並將文件的數據存儲在變量'mol'中。然後，用戶應該點擊「開始測驗」按鈕來啓動該分子的測驗。

爲獲得JSON文件和測驗的按鈕的代碼給出如下：

var mol = "null"; 
var cb = "null"; 
var qNum = "null";           // variable to track question number 
var yesB = "null";           // event listener for a yes response 
var noB = "null";           // event listener for no response 

$('startQuizButton').click(function(){ 
qNum = 0 
if(yesB !== "null") { $('yes').click(function 
yesB = function(mol) {          // set the variable yesB to have the handler function for an event listener 
checkAnswer(mol);} 
noB = function(mol) {          // set the variable noB to have the handler function for an event listener 
checkAnswer(mol);} 
$('#yesButton yes').click(yesB);       // when the button 'yes' is 'clicked' do yesB 
$('#noButton no').click(noB);        // when the button 'no' is 'clicked' do noB 
$('#questionArea').append(q[qNum].text);     // put question '0' (array index value 1) into the question area 
$('#startQuizArea').append(mol.name)      // put molecule name in the start quiz area with button 
}); 

$('#buttonlist button').click(function(evt){ 
cb =evt.target.id; 
cb += ".js"; 
$.getJSON(cb, keepJSON); 
}); 

function keepJSON(data) { 
mol = { 
molName: data.name, 
pointGroup: data.pointGroup, 
inversionCentre: data.inversionCentre, 
linear: data.linear, 
propA: data.properData, 
rflA: data.reflectionArray, 
iprA: data.improperArray 
}} 

checkAnswer = function() 
{ 
var complete = false;           // to track the quiz is still running 
var response = arguments[0].target.id;      // response is given by the the id of the button pressed 
var correctAnswer = cf[qNum](this);       // variable that uses the correct answer functions in array cf[] (below) 
var idenQ = 0;            // this is the question tracker variable, that will be referred to when deciding what to when a response is given 

if(response == correctAnswer)        // if the response of the user is the same as the correct answer 
    idenQ += 1;            // add 1 to the question tracker variable 
if(correctAnswer == 'yes') {         // if the correct answer 
    idenQ += 2; 
if(isString(q[qNum].yes(this))) 
    idenQ += 4; } 
else { 
    if(isString(q[qNum].no(this))) 
    idenQ += 4; 
    } 

switch (idenQ) { 
    case 0:            // incorrect response, answer = no, next = question 
    case 1:            // correct response, answer = no, next = question 
     var nextQuestion = q[qNum].no(this); 
     qNum = nextQuestion; 
     $('#answerArea').text('That is correct.') 
     $('#questionArea').replaceWith(q[qNum].text); 
     break; 
    case 2:            // incorrect response, answer = yes, next = question 
    case 3:            // correct response, answer = yes, next = question 
     var nextQuestion = q[qNum].yes(this); 
     qNum = nextQuestion 
     $('#answerArea').text('Correct'); 
     $('#questionArea').replaceWith(q[qNum].text); 
     break; 
    case 4:            // incorrect response, answer = no, next = point group 
     $('#answerArea').text('That is not correct.'); 
     break; 
    case 5:            // correct response, answer = no, next = point group 
     $('#answerArea').innerHTML = "Correct - the point group is " + q[qNum].no(this) + "."; 
     done = true; 
     break; 
    case 6:            // incorrect response, answer = yes, next = point group 
     $('#answerArea').text('Incorrect'); 
     break; 

    case 7:            // correct response, answer = yes, next = point group 
     $('#answerArea').innerHTML = "Correct - The point group is " + q[qNum].yes(this) + "."; 
     complete = true; 
     break; 
    default: 
     complete = true; 
     break; 
} 

if (complete) { 
    Event.stopObserving('yes', 'click', yesB);   // turn off buttons 
    Event.stopObserving('no', 'click', noB);  
} 
} 

var q = [];             // question array 
var cf = [];             // check function array to check the question's correct answer for molecule 

q[0] = {"text" : function(mol) {return "Is the molecule linear?"}, 
    "yes" : function(mol) {return 1;}, 
    "no" : function(mol) {return 2;} 
    } 

cf[0] = function(mol) { 
    if (mol.linear) 
     return 'yes'; 
    else 
     return 'no'; 
    } 

q[1] = {"text" : function(mol) {return "Does it have an inversion center?"}, 
    "yes" : function(mol) {return 3;}, 
    "no" : function(mol) {return 4;} 
    } 

cf[1] = function(mol) { 
    if (mol.inversioncenter) 
     return 'yes'; 
    else 
     return 'no'; 
    } 
    // and many more questions... 

和HTML頁面如下所示：

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="UTF-8"> 
      <title>Custom Buttons</title> 
       <script type="text/javascript" src="Jmol/Jmol.js"></script> 
       <script type="text/javascript" src="jQuery.js"></script> 
       <script defer type="text/javascript" src="externalJS.js"></script> 
    </head> 
    <body> 
     <div id="buttonlist" style="height:10%;width:100%;"> 
      <button id="H2O" style="height:50px;width:100px" value="H2O">H2O</button> 
      <button id="CO2" style="height:50px;width:100px" value="CO2">CO2</button> 
      <button id="NH3" style="height:50px;width:100px" value="NH3">NH3</button> 
      <button id="BH3" style="height:50px;width:100px" value="BH3">BH3</button> 
      <button id="PYRIDINE" style="height:50px;width:100px" value="PYRIDINE">PYRIDINE</button> 
      <button id="CFH3" style="height:50px;width:100px" value="PF6">CFH3</button> 
      <button id="SF5" style="height:50px;width:100px" value="SF5">SF5</button> 
      <button id="CH4" style="height:50px;width:100px" value="CH4">CH4</button> 
     </div> 
     <div id="application area" style="width:40%;float:left;"> 
      <!--intentionally empty--> 
     </div> 
     <div id="JSONarea" style="width:60%;float:right;"> 
      <div id="startQuizArea" style="height:52px;width:100%;border:1px solid black;"> 
       <button id="startQuizButton" style="height:50px;width:100px;"  value="StartQuiz">Start Quiz</button> 
      </div> 
      <div id="questionArea" style="height:175px;width:100%;border:1px solid black;"> 
      </div> 
      <div id="responseArea" style="height:175px;width:100%;border:1px solid black;"> 
       <div id="yesButton" style="height:99%;width:50%;float:left;"> 
        <button id="yes" style="height:50px;width:70px;" value="yesButton">Yes</button> 
       </div> 
       <div id="noButton" style="height:99%;width:50%;float:right;"> 
        <button id="no" style="height:50px;width:70px;" value="noButton">No</button> 
       </div> 
      </div> 
      <div id="answerArea" style="height:175px;width:100%;border:1px solid black;"> 
      </div> 
     </div> 
    </body> 
</html> 

的問題是，每當我點擊開始測驗按鈕，沒有任何反應，所以測驗不會開始。正如你所看到的，當測驗的第一部分開始時，我已經添加了一些jQuery。這個想法是在問題框上添加一些文本，以此來告訴測驗已經開始，但是又沒有任何反應......

我一直在使用螢火蟲發現代碼中是否有任何錯誤，但是沒有東西被標記。我曾瀏覽過人們曾經遇到的類似問題，但仍無法弄清楚該怎麼做。任何幫助將不勝感激！

Answer 1

您的jQuery選擇器缺少＃。

應該是：

$('#startQuizButton').click(function(){