HTML Button应该启动javascript和jquery测验功能，但是什么也没有发生

Question

Hi I am new to javascript, but I'm really enjoying it. However, I am having a problem with the javascript code below that I am building to set up and carryout a quiz on a html page.

The idea is that when the page loads the user clicks on one of the buttons on the top most row. This then calls the button id's relevant JSON file, which is then 'got' and the data of the file stored in the variable 'mol'. The user should then proceed to click the 'start Quiz'button to initiate the quiz on that molecule.

The code for the buttons that get the JSON files and the quiz are given below:

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...

and the HTML page is shown here:

<!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>

The problem is that whenever I click the start Quiz button, nothing happens and so the quiz does not start. As you can see I've added a bit of jQuery when the first part of the quiz starts. The idea was to append some text onto the question box as a way to tell that the quiz has started, but again nothing happens...

I've been using firebug to spot if there are any errors in the code but nothing gets flagged. I've had a look through similar issues people have had previously but still cant figure out what to do. Any help would be greatly appreciated!

Answer 1

Your jQuery selector is missing a #.

Should be:

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