jQuery简单测验不起作用

时间:2014-04-14 21:44:47

标签: javascript jquery html

我只是在学习Javascript和jQuery。我做了一个基本上已经破解的简单测验,但我已将问题缩小到我的代码。我确信所有的id都是链接的,并且jQuery正确连接到CDN。我知道我可以一个接一个地问这些问题,但是imo这是一个草率的编码。

来自http://pastebin.com/54JQwhAg

HTML: <!DOCTYPE html>
<html>
    <head>
        <meta charset="Utf-8">
        <title>The quiz to end all quizes</title>
        <link rel="stylesheet" href="style.css">
        <script src="libs/jquery-1.11.0.min.js"></script>
        <script src="script.js"></script>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
        <link rel="icon" href="favicon.ico" type="image/x-icon">
    </head>
    <body>
        <div id="main">
            <div id="header">
                <img src="images/logo.png">
                <h2>This page is an experiment to see if I can use JavaScript and jQuery to make a quiz game.</h2>
                <p>Please answer with no punctuation.</p>
                <p id="show">Click here to show answers.</p>
                <img id="start" src="images/clickme.png">
            </div>
            <div id="answers">
                <!-- CHEATER!!! -->
                <p><span id="ans1"></span>Q: Who was the first African-American major league baseball player? A: Jackie Robinson</p>
                <p><span id="ans2"></span>Q: Who was the second U.S. President? A: John Adams</p>
                <p><span id="ans3"></span>Q: Where did the general keep his armies? A: In his sleevies</p>
                <p><span id="ans4"></span>Q: Why did the chicken cross the road? A: To get to the other side</p>
                <p><span id="ans5"></span>Q: Why did the scarecrow get a promotion? A: He was outstanding in his field</p>
                <h2 id="numright"></h2>
                <p id="hide">Click here to hide answers.</p>
            </div>
        </div>
    </body>
</html>

Javascript:
$(document).ready(function() {
    var score;
    var questions = [
                    "Who was the first African-American major league baseball player?", 
                    "Who was the second U.S. President?",
                    "Where did the general keep his armies?",
                    "Why did the chicken cross the road?",
                    "Why did the scarecrow get a promotion?"
                    ];
    var answers = [
                    "jackie robinson",
                    "john adams",
                    "in his sleevies",
                    "to get to the other side",
                    "He was outstanding in his field"
                    ];
    $('#answers').hide() // hide answers
    $('#start').click(function() {
        for (num=0; num<5, num++){
            var ans = prompt(questions[num], "Enter Answer Here")
            if (ans == answers[num])
                score++
            } // end if
        } // end for
        $('#answers').show() // show answers
        $('#show').hide() // hide show
        $('#numright').write('You got ' + score + '/5')
    }); // end click
    $("#show").click(function() {
        $('#answers').show() // show answers
        $('#show').hide() // hide show button
    }); // end click
    $("#hide").click(function() {
        $('#answers').hide() // hide answers
        $('#show').show() // show show button
    }); // end click    
}); // end ready

基本上,应该隐藏的部分在开始时不加载,当点击开始测验的图像时,没有任何反应。当我试图将问题缩小到一行代码时,部分代码随机工作,然后无法工作,没有明显的相关性。

1 个答案:

答案 0 :(得分:1)

我发现代码中有2个错误,都在for循环中

首先,你的for循环在num<5

之后有逗号而不是半冒号

其次,你在if语句

上错过了你的大括号

修正:

for (num=0; num<5; num++) {
    var ans = prompt(questions[num], "Enter Answer Here")
    if (ans == answers[num]) {
        score++
    } // end if
} // end for

此外,还有一些事项要注意

在尝试增加变量score之前,需要对其进行初始化;

var score = 0;

更进一步说,在<h2>标记中输出得分时,您使用.write()作为函数,我假设基于JavaScript的document.write()。在jQuery中使用.text()代替,分数输出成功。

Fixed Fiddle