2014-04-14 26 views
0

我剛剛學習Javascript和jQuery。我做了一個基本上已經破解的簡單測驗,但是我已經將問題縮小到了我的代碼中。我確信所有的id都是鏈接的,並且jQuery與CDN正確連接。我知道我可以一個接一個地提出問題,但是這是潦草的編碼。jQuery簡單測驗不工作

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

要添加代碼,請單擊工具欄上的'{}'按鈕,然後在你的代碼粘貼。我已經修復它。 – AstroCB

+0

出於興趣,由於錯誤與缺少字符有關,您使用的是哪種文本編輯器?一個帶有代碼提示可能有益於避免將來的錯誤 –

+0

Standard Notepad ++ – HipsterLeprechaun

回答

1

我發現要通過代碼2級的錯誤,無論是在for循環

首先你的for循環有一個逗號而不是分號後num<5

其次,你失蹤在你的大括號如果更正聲明,

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