2017-04-22 72 views
0

最近,我發佈瞭如何在一個在線測驗中使用innerHTML實現一個變量。結果是變量在我的代碼中被意外地聲明爲一個字符串。我擺脫了引號和網頁再次工作。之後再添加不同的句子,比如「你的分數是11/11。你用滿分標準進行了測試,不要太興奮,這只是簡單的部分。」對於測驗的每個部分,我爲每個部分分配了不同的分數變量,以便用戶可以看到他們在測試後的表現如何。例如,簡單部分獲得了自己的分數變量escore,該分數是通過在測驗期間的該特定時間將該變量設置爲當前分數而創建的。這是我剩下什麼:innerHTML不顯示

function eqs() { 
    var escore = score; 
    if (escore < 4) {document.getElementById("sum1").innerHTML = "Well done for completing the easy questions! Your score was: " + escore + "/ 10. If you're reading this message, you got below 4 marks. Considering that this the easy section, you should've got a much higher score.";} 
    if (escore > 4 && < 7) {document.getElementById("sum1").innerHTML = "Well done for completing the easy questions! Your score was: " + escore + "/ 10. You didn't get a bad score, but neither did you get a good score. If you were guessing, consider yourself lucky.";} 
    if (escore > 7 && < 10) {document.getElementById("sum1").innerHTML = "Well done for completing the easy questions! Your score was: " + escore + "/ 10. You got a fairly decent score. Typically, you should get 11, but you're not far off.";} 
    if (escore == 11) {document.getElementById("sum1").innerHTML = "Well done for completing the easy questions! Your score was: " + escore + "/ 10. Nice job! You aced this section with full marks! Don't get too excited though, this is only the easy section.";} 
    } 

沒有露面,所以我決定添加警報時執行該功能告訴我,我的分數的值會顯示彈出畫面。我重新測試了它,但再一次沒有出現。這一次,我瀏覽了整個文件,以確保我沒有錯過任何愚蠢的錯誤。我哪裏錯了? (這將是如此諷刺,如果我寫了這一切對於我設法不看一個愚蠢的錯誤...)

整個代碼(以防萬一你需要它):

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    <style> 
 
     @import url('https://fonts.googleapis.com/css?family=Open+Sans'); 
 
     body { 
 
     background-color: red; 
 
     color: white; 
 
     font-family: 'Open Sans', Arial; 
 
     margin: auto; 
 
     margin-top: 20px; 
 
     max-width: 1160px; 
 
     } 
 
     .jumbotron {background-color: #ff4d4d;} 
 
     .btn {width: 100%;} 
 
    </style> 
 
    <script> 
 
\t $(document).ready(function(){$('[data-toggle="tooltip"]').tooltip();}); 
 
     var score = 0; 
 
     var seconds = 0; 
 
     function add1() {score += 1}; 
 
     function add2() {score += 2}; 
 
     function add3() {score += 3}; 
 
     function eqs() { 
 
     var escore = score; 
 
     alert(" + escore + "); 
 
     if (escore < 4) {document.getElementById("sum1").innerHTML = "Well done for completing the easy questions! Your score was: " + escore + "/ 10. If you're reading this message, you got below 4 marks. Considering that this the easy section, you should've got a much higher score.";} 
 
     if (escore > 4 && < 7) {document.getElementById("sum1").innerHTML = "Well done for completing the easy questions! Your score was: " + escore + "/ 10. You didn't get a bad score, but neither did you get a good score. If you were guessing, consider yourself lucky.";} 
 
     if (escore > 7 && < 10) {document.getElementById("sum1").innerHTML = "Well done for completing the easy questions! Your score was: " + escore + "/ 10. You got a fairly decent score. Typically, you should get 11, but you're not far off.";} 
 
     if (escore == 11) {document.getElementById("sum1").innerHTML = "Well done for completing the easy questions! Your score was: " + escore + "/ 10. Nice job! You aced this section with full marks! Don't get too excited though, this is only the easy section.";} 
 
     } 
 
    </script> 
 
    <title>Year 7 English Quiz - Are you smarter than an 11 year old?</title> 
 
    </head> 
 
    <body> 
 
    <div class="container"> 
 
\t <h1>Year 7 English Quiz - Are you smarter than an 11 year old?</h1><hr> 
 
\t <h3>Rules: (Read before playing)</h3> 
 
\t <p>'-' Means fill in the blank with a word</p> 
 
\t <p>'|' Means fill in the blank with a phrase</p> 
 
\t <p>'+' Means complete the word</p> 
 
\t <p>There are 33 questions in this quiz.</p> 
 
\t <p>By hitting the timer to the bottom, you can challenge yourself and see how quick you could complete the quiz.</p> 
 
\t <p>11 will be a set of easy questions, another 11 will be a set of medium questions and the last 11 will be hard/or virtually impossible for a Year 7 to figure out.</p> 
 
     <p>These difficulty levels only apply to Year 7s. A hard question could be simple to you.</p> 
 
\t <p>Have fun and don't get mad if you don't pass the test. If you fail, then that doesn't necessarily bad at English!</p> 
 
\t <p>Don't click a button two times during a quiz unless you want to mess everything up. But I know you're probably a rebel.</p> 
 
\t <p>Scroll down after each question, as some may not show on your screen and will be below</p> 
 
\t <p>At the end, your points will be tallied up. Through hard, you will receive negative points for answering a question incorrectly.</p> 
 
\t <button class="btn btn-default" onclick="stopwatch">Stopwatch</button> 
 
\t <span data-toggle="collapse" data-target="#q1" id="disableoc"><button type="button" class="btn btn-default"><a href="#" data-toggle="tooltip" data-placement="bottom" title="Chill Out M8">Just get to the questions already!</a></button></span><hr> 
 
\t <div id="q1" class="collapse"> 
 
\t \t <h1>Easy Questions:</h1><br> 
 
\t \t <div class="jumbotron"><h1 class="question">Question 1: When is _ birthday?</h1></div> 
 
\t \t <button onclick="add1()" class="btn btn-danger" data-toggle="collapse" data-target="#q2">Answer 1: Your</button> 
 
\t \t <button onclick="minus1()" class="btn btn-danger" data-toggle="collapse" data-target="#q2">Answer 2: You're</button><hr> 
 
\t </div> 
 
\t <div id="q2" class="collapse"> 
 
\t \t <div class="jumbotron"><h1 class="question">Question 2: +ranky</h1></div> 
 
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#q3">Answer 1: Kranky</button> 
 
\t \t <button onclick="add1()" class="btn btn-danger" data-toggle="collapse" data-target="#q3">Answer 2: Cranky</button><hr> 
 
\t </div> 
 
\t <div id="q3" class="collapse"> 
 
\t \t <div class="jumbotron"><h1 class="question">Question 3: Spot the word class that doesn't exist.</h1></div> 
 
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#q4">Answer 1: Determiner</button> 
 
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#q4">Answer 2: Verb</button> 
 
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#q4">Answer 3: Noun</button> 
 
     <button class="btn btn-danger" data-toggle="collapse" data-target="#q4">Answer 4: Preposition</button> 
 
     <button onclick="add1()" class="btn btn-danger" data-toggle="collapse" data-target="#q4">Answer 5: Proverb</button> 
 
     <button class="btn btn-danger" data-toggle="collapse" data-target="#q4">Answer 6: Adjective</button><hr> 
 
\t </div> 
 
\t <div id="q4" class="collapse"> 
 
\t \t <div class="jumbotron"><h1 class="question">Question 4: It's - cats and dogs.</h1></div> 
 
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#q5">Answer 1: Pouring</button> 
 
\t \t <button onclick="add1()" class="btn btn-danger" data-toggle="collapse" data-target="#q5">Answer 2: Raining</button><hr> 
 
\t </div> 
 
\t <div id="q5" class="collapse"> 
 
\t \t <div class="jumbotron"><h1 class="question">Question 5: +yclone</h1></div> 
 
\t \t <button onclick="add1()" class="btn btn-danger" data-toggle="collapse" data-target="#q6">Answer 1: Cyclone</button> 
 
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#q6">Answer 2: Syclone</button><hr> 
 
\t </div> 
 
\t <div id="q6" class="collapse"> 
 
\t \t <div class="jumbotron"><h1 class="question">Question 6: I - cheeseburger.</h1></div> 
 
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#q7">Answer 1: Haz</button> 
 
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#q7">Answer 2: Have</button> 
 
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#q7">Answer 3: Has a</button> 
 
\t \t <button onclick="add1()" class="btn btn-danger" data-toggle="collapse" data-target="#q7">Answer 4: Have a</button><hr> 
 
\t </div> 
 
\t <div id="q7" class="collapse"> 
 
\t \t <div class="jumbotron"><h1 class="question">Question 7: Find the tense of the following sentence: I located my nearest barber.</h1></div> 
 
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#q8">Answer 1: Present</button> 
 
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#q8">Answer 2: Simple</button> 
 
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#q8">Answer 3: Continuous</button> 
 
\t \t <button onclick="add1()" class="btn btn-danger" data-toggle="collapse" data-target="#q8">Answer 4: Past</button> 
 
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#q8">Answer 5: Future</button><hr> 
 
\t </div> 
 
\t <div id="q8" class="collapse"> 
 
\t \t <div class="jumbotron"><h1 class="question">Question 8: - the remote control.</h1></div> 
 
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#q9">Answer 1: Gimme</button> 
 
\t \t <button onclick="add1()" class="btn btn-danger" data-toggle="collapse" data-target="#q9">Answer 2: Give me</button> 
 
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#q9">Answer 3: Gave me</button><hr> 
 
\t </div> 
 
\t <div id="q9" class="collapse"> 
 
\t \t <div class="jumbotron"><h1 class="question">Question 9: What is the closest definition to a synonym?</h1></div> 
 
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#q10">Answer 1: A word used to describe a verb</button> 
 
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#q10">Answer 2: A group of words that acts in the same way as a participle</button><br> 
 
\t \t <button onclick="add1()" class="btn btn-danger" data-toggle="collapse" data-target="#q11">Answer 3: A word that is similar if not identical to another word</button><hr> 
 
\t </div> 
 
\t <div id="q10" class="collapse"> 
 
\t \t <div class="jumbotron"><h1 class="question">Question 10: What is the closest definition to a noun phrase?</h1></div> 
 
\t \t <button onclick="add1()" class="btn btn-danger" data-toggle="collapse" data-target="#q11">Answer 1: Answer 2 but the noun *must* be either a subject or object</button> 
 
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#q11">Answer 2: A phrase with 1 or more noun(s) in it</button> 
 
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#q11">Answer 3: A noun that also acts a phrase</button><hr> 
 
\t </div> 
 
\t <div id="q11" class="collapse"> 
 
\t \t <div class="jumbotron"><h1 class="question">Question 11: The he was entirely - in frozen carbonite.</h1></div> 
 
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#eqsummary" onclick="eqs()">Answer 1: Encasted</button> 
 
\t \t <button onclick="add1()" class="btn btn-danger" data-toggle="collapse" data-target="#eqsummary" onclick="eqs()">Answer 2: Encapsulated</button> 
 
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#eqsummary" onclick="eqs()">Answer 3: Capsulated</button> 
 
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#eqsummary" onclick="eqs()">Answer 4: Capered</button><hr> 
 
\t </div> 
 
\t <div id="eqsummary" class="collapse"> 
 
\t  <div class="jumbotron"><p id="sum1"></p></div> 
 
\t </div> 
 
\t </div> 
 
    </body> 
 
</html>

+0

隨着我不斷閱讀您的所有評論,他們都沒有看起來工作得太好......要麼沒有出現,要麼只出現一次。正因爲如此,我決定擺脫分數函數,而是告訴用戶他們在每個部分有什麼累積分數。我再次測試它,它顯示0/0,但是當我重新加載頁面時,我完成了測驗,我仍然得到0/0。關於如何解決這個問題的任何想法? –

回答

0

你的第二和第三條if語句是錯誤的。您必須在& &運算符的兩側引用您的變量。

+0

我按照你的要求添加了escore變量,但仍然沒有顯示出來。 –

0

這是工作片段。它按照你的要求工作。

請嘗試一下;)

<!DOCTYPE html> 
 
<html> 
 
    <head lang="en"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    <style> 
 
     @import url('https://fonts.googleapis.com/css?family=Open+Sans'); 
 
     body { 
 
     background-color: red; 
 
     color: white; 
 
     font-family: 'Open Sans', Arial; 
 
     margin: auto; 
 
     margin-top: 20px; 
 
     max-width: 1160px; 
 
     } 
 
     .jumbotron {background-color: #ff4d4d;} 
 
     .btn {width: 100%;} 
 
    </style> 
 
    <title>Year 7 English Quiz - Are you smarter than an 11 year old?</title> 
 
    </head> 
 
    <body> 
 
    <div class="container"> 
 
\t <h1>Year 7 English Quiz - Are you smarter than an 11 year old?</h1><hr> 
 
\t <h3>Rules: (Read before playing)</h3> 
 
\t <p>'-' Means fill in the blank with a word</p> 
 
\t <p>'|' Means fill in the blank with a phrase</p> 
 
\t <p>'+' Means complete the word</p> 
 
\t <p>There are 33 questions in this quiz.</p> 
 
\t <p>By hitting the timer to the bottom, you can challenge yourself and see how quick you could complete the quiz.</p> 
 
\t <p>11 will be a set of easy questions, another 11 will be a set of medium questions and the last 11 will be hard/or virtually impossible for a Year 7 to figure out.</p> 
 
     <p>These difficulty levels only apply to Year 7s. A hard question could be simple to you.</p> 
 
\t <p>Have fun and don't get mad if you don't pass the test. If you fail, then that doesn't necessarily mean you're bad at English!</p> 
 
\t <p>Don't click a button two times during a quiz unless you want to mess everything up. But I know you're probably a rebel.</p> 
 
\t <p>Scroll down after each question, as some may not show on your screen and will be below</p> 
 
\t <p>At the end, your points will be tallied up. Through hard, you will receive negative points for answering a question incorrectly.</p> 
 
\t <button class="btn btn-default" onclick="stopwatch">Stopwatch</button> 
 
\t <span data-toggle="collapse" data-target="#q1" id="disableoc"><button type="button" class="btn btn-default"><a href="#" data-toggle="tooltip" data-placement="bottom" title="Chill Out M8">Just get to the questions already!</a></button></span><hr> 
 
\t <div id="q1" class="collapse"> 
 
\t \t <h1>Easy Questions:</h1><br> 
 
\t \t <div class="jumbotron"><h1 class="question">Question 1: When is _ birthday?</h1></div> 
 
\t \t <button onclick="add1()" class="btn btn-danger" data-toggle="collapse" data-target="#q2">Answer 1: Your</button> 
 
\t \t <button onclick="wAnswer()" class="btn btn-danger" data-toggle="collapse" data-target="#q2">Answer 2: You're</button><hr> 
 
\t </div> 
 
\t <div id="q2" class="collapse"> 
 
\t \t <div class="jumbotron"><h1 class="question">Question 2: +ranky</h1></div> 
 
\t \t <button onclick="wAnswer()" class="btn btn-danger" data-toggle="collapse" data-target="#q3">Answer 1: Kranky</button> 
 
\t \t <button onclick="add1()" class="btn btn-danger" data-toggle="collapse" data-target="#q3">Answer 2: Cranky</button><hr> 
 
\t </div> 
 
\t <div id="q3" class="collapse"> 
 
\t \t <div class="jumbotron"><h1 class="question">Question 3: Spot the word class that doesn't exist.</h1></div> 
 
\t \t <button onclick="wAnswer()" class="btn btn-danger" data-toggle="collapse" data-target="#q4">Answer 1: Determiner</button> 
 
\t \t <button onclick="wAnswer()" class="btn btn-danger" data-toggle="collapse" data-target="#q4">Answer 2: Verb</button> 
 
\t \t <button onclick="wAnswer()" class="btn btn-danger" data-toggle="collapse" data-target="#q4">Answer 3: Noun</button> 
 
     <button onclick="wAnswer()" class="btn btn-danger" data-toggle="collapse" data-target="#q4">Answer 4: Preposition</button> 
 
     <button onclick="add1()" class="btn btn-danger" data-toggle="collapse" data-target="#q4">Answer 5: Proverb</button> 
 
     <button onclick="wAnswer()" class="btn btn-danger" data-toggle="collapse" data-target="#q4">Answer 6: Adjective</button><hr> 
 
\t </div> 
 
\t <div id="q4" class="collapse"> 
 
\t \t <div class="jumbotron"><h1 class="question">Question 4: It's - cats and dogs.</h1></div> 
 
\t \t <button onclick="wAnswer()" class="btn btn-danger" data-toggle="collapse" data-target="#q5">Answer 1: Pouring</button> 
 
\t \t <button onclick="add1()" class="btn btn-danger" data-toggle="collapse" data-target="#q5">Answer 2: Raining</button><hr> 
 
\t </div> 
 
\t <div id="q5" class="collapse"> 
 
\t \t <div class="jumbotron"><h1 class="question">Question 5: +yclone</h1></div> 
 
\t \t <button onclick="add1()" class="btn btn-danger" data-toggle="collapse" data-target="#q6">Answer 1: Cyclone</button> 
 
\t \t <button onclick="wAnswer()" class="btn btn-danger" data-toggle="collapse" data-target="#q6">Answer 2: Syclone</button><hr> 
 
\t </div> 
 
\t <div id="q6" class="collapse"> 
 
\t \t <div class="jumbotron"><h1 class="question">Question 6: I - cheeseburger.</h1></div> 
 
\t \t <button onclick="wAnswer()" class="btn btn-danger" data-toggle="collapse" data-target="#q7">Answer 1: Haz</button> 
 
\t \t <button onclick="wAnswer()" class="btn btn-danger" data-toggle="collapse" data-target="#q7">Answer 2: Have</button> 
 
\t \t <button onclick="wAnswer()" class="btn btn-danger" data-toggle="collapse" data-target="#q7">Answer 3: Has a</button> 
 
\t \t <button onclick="add1()" class="btn btn-danger" data-toggle="collapse" data-target="#q7">Answer 4: Have a</button><hr> 
 
\t </div> 
 
\t <div id="q7" class="collapse"> 
 
\t \t <div class="jumbotron"><h1 class="question">Question 7: Find the tense of the following sentence: I located my nearest barber.</h1></div> 
 
\t \t <button onclick="wAnswer()" class="btn btn-danger" data-toggle="collapse" data-target="#q8">Answer 1: Present</button> 
 
\t \t <button onclick="wAnswer()" class="btn btn-danger" data-toggle="collapse" data-target="#q8">Answer 2: Simple</button> 
 
\t \t <button onclick="wAnswer()" class="btn btn-danger" data-toggle="collapse" data-target="#q8">Answer 3: Continuous</button> 
 
\t \t <button onclick="add1()" class="btn btn-danger" data-toggle="collapse" data-target="#q8">Answer 4: Past</button> 
 
\t \t <button onclick="wAnswer()" class="btn btn-danger" data-toggle="collapse" data-target="#q8">Answer 5: Future</button><hr> 
 
\t </div> 
 
\t <div id="q8" class="collapse"> 
 
\t \t <div class="jumbotron"><h1 class="question">Question 8: - the remote control.</h1></div> 
 
\t \t <button onclick="wAnswer()" class="btn btn-danger" data-toggle="collapse" data-target="#q9">Answer 1: Gimme</button> 
 
\t \t <button onclick="add1()" class="btn btn-danger" data-toggle="collapse" data-target="#q9">Answer 2: Give me</button> 
 
\t \t <button onclick="wAnswer()" class="btn btn-danger" data-toggle="collapse" data-target="#q9">Answer 3: Gave me</button><hr> 
 
\t </div> 
 
\t <div id="q9" class="collapse"> 
 
\t \t <div class="jumbotron"><h1 class="question">Question 9: What is the closest definition to a synonym?</h1></div> 
 
\t \t <button onclick="wAnswer()" class="btn btn-danger" data-toggle="collapse" data-target="#q10">Answer 1: A word used to describe a verb</button> 
 
\t \t <button onclick="wAnswer()" class="btn btn-danger" data-toggle="collapse" data-target="#q10">Answer 2: A group of words that acts in the same way as a participle</button><br> 
 
\t \t <button onclick="add1()" class="btn btn-danger" data-toggle="collapse" data-target="#q11">Answer 3: A word that is similar if not identical to another word</button><hr> 
 
\t </div> 
 
\t <div id="q10" class="collapse"> 
 
\t \t <div class="jumbotron"><h1 class="question">Question 10: What is the closest definition to a noun phrase?</h1></div> 
 
\t \t <button onclick="add1()" class="btn btn-danger" data-toggle="collapse" data-target="#q11">Answer 1: Answer 2 but the noun *must* be either a subject or object</button> 
 
\t \t <button onclick="wAnswer()" class="btn btn-danger" data-toggle="collapse" data-target="#q11">Answer 2: A phrase with 1 or more noun(s) in it</button> 
 
\t \t <button onclick="wAnswer()" class="btn btn-danger" data-toggle="collapse" data-target="#q11">Answer 3: A noun that also acts a phrase</button><hr> 
 
\t </div> 
 
\t <div id="q11" class="collapse"> 
 
\t \t <div class="jumbotron"><h1 class="question">Question 11: The he was entirely - in frozen carbonite.</h1></div> 
 
\t \t <button onclick="wAnswer()" class="btn btn-danger" data-toggle="collapse" data-target="#eqsummary">Answer 1: Encasted</button> 
 
\t \t <button onclick="add1()" class="btn btn-danger" data-toggle="collapse" data-target="#eqsummary">Answer 2: Encapsulated</button> 
 
\t \t <button onclick="wAnswer()" class="btn btn-danger" data-toggle="collapse" data-target="#eqsummary">Answer 3: Capsulated</button> 
 
\t \t <button onclick="wAnswer()" class="btn btn-danger" data-toggle="collapse" data-target="#eqsummary">Answer 4: Capered</button><hr> 
 
\t </div> 
 
\t <div id="eqsummary" class="collapse"> 
 
\t  <div class="jumbotron"><p id="sum1"></p></div> 
 
\t </div> 
 
\t </div> 
 
\t 
 
    <script> 
 
\t $(document).ready(function(){$('[data-toggle="tooltip"]').tooltip();}); 
 
     var score = 0; 
 
     var seconds = 0; 
 
\t var qcount = 0; 
 
\t 
 
     function add1() { 
 
\t \t score++; 
 
\t \t qcount++; 
 
\t \t 
 
\t \t if(qcount == 11) eqs(score); 
 
\t }; 
 
\t 
 
     function add2() {score += 2}; 
 
     function add3() {score += 3}; 
 
\t 
 
     function wAnswer() { 
 
\t \t qcount++; 
 
\t \t 
 
\t \t if(qcount == 11) eqs(score); 
 
\t }; 
 
\t 
 
     function eqs(score) { 
 
     var escore = score; 
 
     alert(" + escore + "); 
 
     if (escore < 4) {document.getElementById("sum1").innerHTML = "Well done for completing the easy questions! Your score was: " + escore + "/ 10. If you're reading this message, you got below 4 marks. Considering that this the easy section, you should've got a much higher score.";} 
 
     if (escore > 4 && escore < 7) {document.getElementById("sum1").innerHTML = "Well done for completing the easy questions! Your score was: " + escore + "/ 10. You didn't get a bad score, but neither did you get a good score. If you were guessing, consider yourself lucky.";} 
 
     if (escore > 7 && escore < 10) {document.getElementById("sum1").innerHTML = "Well done for completing the easy questions! Your score was: " + escore + "/ 10. You got a fairly decent score. Typically, you should get 11, but you're not far off.";} 
 
     if (escore == 11) {document.getElementById("sum1").innerHTML = "Well done for completing the easy questions! Your score was: " + escore + "/ 10. Nice job! You aced this section with full marks! Don't get too excited though, this is only the easy section.";} 
 
     } 
 
    </script> 
 
    </body> 
 
</html>

+0

我按照你的要求添加了escore變量,但仍然沒有顯示出來。 –

+0

您是否嘗試過調試? –

+0

注意:把你的腳本放在你的身體底部,有時腳本不會運行,如果你把它放在頭部。其次:在最後一個問題(11)中,您可以在1個html標籤中嘗試2個'onclick'事件。我不認爲這是可能的,因爲它首先運行添加,但從來沒有這個eqs。 –

0

正如其他人所提到的,你需要做這樣的if (escore > 4 && escore < 7)比較。您還需要通過調用它來執行此功能。你的<p id="sum1"></p>的父容器編號爲#eqsummarycollapse類,所以它將被隱藏。

而不是重新聲明escore裏面eqs功能,你可以通過score它,這會使你的功能有點模塊化。

我還是想你的代碼在進步,但這裏的問題的解決你的問題

$(document).ready(function(){ 
 
\t var score = 0; 
 
\t var seconds = 0; 
 
\t 
 
\t $('[data-toggle="tooltip"]').tooltip(); 
 

 
\t function add1() {score += 1;} 
 
\t function add2() {score += 2;} 
 
\t function add3() {score += 3;} 
 
\t 
 
\t function eqs(escore) { 
 
\t \t var sumContainer = document.getElementById("sum1"); 
 

 
     if (escore < 4) { 
 
\t \t \t sumContainer.innerHTML = "Well done for completing the easy questions! Your score was: " + escore + "/ 10. If you're reading this message, you got below 4 marks. Considering that this the easy section, you should've got a much higher score."; 
 
\t \t } 
 
     if (escore > 4 && escore < 7) { 
 
\t \t \t sumContainer.innerHTML = "Well done for completing the easy questions! Your score was: " + escore + "/ 10. You didn't get a bad score, but neither did you get a good score. If you were guessing, consider yourself lucky."; 
 
\t \t } 
 
     if (escore > 7 && escore < 10) { 
 
\t \t \t sumContainer.innerHTML = "Well done for completing the easy questions! Your score was: " + escore + "/ 10. You got a fairly decent score. Typically, you should get 11, but you're not far off."; 
 
\t \t } 
 
     if (escore === 11) { 
 
\t \t \t sumContainer.innerHTML = "Well done for completing the easy questions! Your score was: " + escore + "/ 10. Nice job! You aced this section with full marks! Don't get too excited though, this is only the easy section."; 
 
\t \t } 
 
     } 
 
\t 
 
add1(); 
 
add2(); 
 
add3(); 
 
eqs(score); 
 
\t 
 
});
body{ 
 
    background-color: red; 
 
    color: white; 
 
    font-family: 'Open Sans', Arial; 
 
    margin: auto; 
 
    margin-top: 20px; 
 
    max-width: 1160px; 
 
    } 
 
.jumbotron {background-color: #ff4d4d;} 
 
.btn {width: 100%;} 
 

 
#eqsummary div{ 
 
\t border: 1px solid #fff; 
 
}
<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
    <title>Year 7 English Quiz - Are you smarter than an 11 year old?</title> 
 
    </head> 
 
    <body> 
 
    <div class="container"> 
 
\t <h1>Year 7 English Quiz - Are you smarter than an 11 year old?</h1><hr> 
 
\t <h3>Rules: (Read before playing)</h3> 
 
\t <p>'-' Means fill in the blank with a word</p> 
 
\t <p>'|' Means fill in the blank with a phrase</p> 
 
\t <p>'+' Means complete the word</p> 
 
\t <p>There are 33 questions in this quiz.</p> 
 
\t <p>By hitting the timer to the bottom, you can challenge yourself and see how quick you could complete the quiz.</p> 
 
\t <p>11 will be a set of easy questions, another 11 will be a set of medium questions and the last 11 will be hard/or virtually impossible for a Year 7 to figure out.</p> 
 
     <p>These difficulty levels only apply to Year 7s. A hard question could be simple to you.</p> 
 
\t <p>Have fun and don't get mad if you don't pass the test. If you fail, then that doesn't necessarily bad at English!</p> 
 
\t <p>Don't click a button two times during a quiz unless you want to mess everything up. But I know you're probably a rebel.</p> 
 
\t <p>Scroll down after each question, as some may not show on your screen and will be below</p> 
 
\t <p>At the end, your points will be tallied up. Through hard, you will receive negative points for answering a question incorrectly.</p> 
 
\t <button class="btn btn-default" onclick="stopwatch">Stopwatch</button> 
 
\t <span data-toggle="collapse" data-target="#q1" id="disableoc"><button type="button" class="btn btn-default"><a href="#" data-toggle="tooltip" data-placement="bottom" title="Chill Out M8">Just get to the questions already!</a></button></span><hr> 
 
\t <div id="q1" class="collapse"> 
 
\t \t <h1>Easy Questions:</h1><br> 
 
\t \t <div class="jumbotron"><h1 class="question">Question 1: When is _ birthday?</h1></div> 
 
\t \t <button onclick="add1()" class="btn btn-danger" data-toggle="collapse" data-target="#q2">Answer 1: Your</button> 
 
\t \t <button onclick="minus1()" class="btn btn-danger" data-toggle="collapse" data-target="#q2">Answer 2: You're</button><hr> 
 
\t </div> 
 
\t <div id="q2" class="collapse"> 
 
\t \t <div class="jumbotron"><h1 class="question">Question 2: +ranky</h1></div> 
 
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#q3">Answer 1: Kranky</button> 
 
\t \t <button onclick="add1()" class="btn btn-danger" data-toggle="collapse" data-target="#q3">Answer 2: Cranky</button><hr> 
 
\t </div> 
 
\t <div id="q3" class="collapse"> 
 
\t \t <div class="jumbotron"><h1 class="question">Question 3: Spot the word class that doesn't exist.</h1></div> 
 
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#q4">Answer 1: Determiner</button> 
 
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#q4">Answer 2: Verb</button> 
 
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#q4">Answer 3: Noun</button> 
 
     <button class="btn btn-danger" data-toggle="collapse" data-target="#q4">Answer 4: Preposition</button> 
 
     <button onclick="add1()" class="btn btn-danger" data-toggle="collapse" data-target="#q4">Answer 5: Proverb</button> 
 
     <button class="btn btn-danger" data-toggle="collapse" data-target="#q4">Answer 6: Adjective</button><hr> 
 
\t </div> 
 
\t <div id="q4" class="collapse"> 
 
\t \t <div class="jumbotron"><h1 class="question">Question 4: It's - cats and dogs.</h1></div> 
 
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#q5">Answer 1: Pouring</button> 
 
\t \t <button onclick="add1()" class="btn btn-danger" data-toggle="collapse" data-target="#q5">Answer 2: Raining</button><hr> 
 
\t </div> 
 
\t <div id="q5" class="collapse"> 
 
\t \t <div class="jumbotron"><h1 class="question">Question 5: +yclone</h1></div> 
 
\t \t <button onclick="add1()" class="btn btn-danger" data-toggle="collapse" data-target="#q6">Answer 1: Cyclone</button> 
 
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#q6">Answer 2: Syclone</button><hr> 
 
\t </div> 
 
\t <div id="q6" class="collapse"> 
 
\t \t <div class="jumbotron"><h1 class="question">Question 6: I - cheeseburger.</h1></div> 
 
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#q7">Answer 1: Haz</button> 
 
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#q7">Answer 2: Have</button> 
 
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#q7">Answer 3: Has a</button> 
 
\t \t <button onclick="add1()" class="btn btn-danger" data-toggle="collapse" data-target="#q7">Answer 4: Have a</button><hr> 
 
\t </div> 
 
\t <div id="q7" class="collapse"> 
 
\t \t <div class="jumbotron"><h1 class="question">Question 7: Find the tense of the following sentence: I located my nearest barber.</h1></div> 
 
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#q8">Answer 1: Present</button> 
 
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#q8">Answer 2: Simple</button> 
 
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#q8">Answer 3: Continuous</button> 
 
\t \t <button onclick="add1()" class="btn btn-danger" data-toggle="collapse" data-target="#q8">Answer 4: Past</button> 
 
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#q8">Answer 5: Future</button><hr> 
 
\t </div> 
 
\t <div id="q8" class="collapse"> 
 
\t \t <div class="jumbotron"><h1 class="question">Question 8: - the remote control.</h1></div> 
 
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#q9">Answer 1: Gimme</button> 
 
\t \t <button onclick="add1()" class="btn btn-danger" data-toggle="collapse" data-target="#q9">Answer 2: Give me</button> 
 
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#q9">Answer 3: Gave me</button><hr> 
 
\t </div> 
 
\t <div id="q9" class="collapse"> 
 
\t \t <div class="jumbotron"><h1 class="question">Question 9: What is the closest definition to a synonym?</h1></div> 
 
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#q10">Answer 1: A word used to describe a verb</button> 
 
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#q10">Answer 2: A group of words that acts in the same way as a participle</button><br> 
 
\t \t <button onclick="add1()" class="btn btn-danger" data-toggle="collapse" data-target="#q11">Answer 3: A word that is similar if not identical to another word</button><hr> 
 
\t </div> 
 
\t <div id="q10" class="collapse"> 
 
\t \t <div class="jumbotron"><h1 class="question">Question 10: What is the closest definition to a noun phrase?</h1></div> 
 
\t \t <button onclick="add1()" class="btn btn-danger" data-toggle="collapse" data-target="#q11">Answer 1: Answer 2 but the noun *must* be either a subject or object</button> 
 
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#q11">Answer 2: A phrase with 1 or more noun(s) in it</button> 
 
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#q11">Answer 3: A noun that also acts a phrase</button><hr> 
 
\t </div> 
 
\t <div id="q11" class="collapse"> 
 
\t \t <div class="jumbotron"><h1 class="question">Question 11: The he was entirely - in frozen carbonite.</h1></div> 
 
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#eqsummary" onclick="eqs()">Answer 1: Encasted</button> 
 
\t \t <button onclick="add1()" class="btn btn-danger" data-toggle="collapse" data-target="#eqsummary" onclick="eqs()">Answer 2: Encapsulated</button> 
 
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#eqsummary" onclick="eqs()">Answer 3: Capsulated</button> 
 
\t \t <button class="btn btn-danger" data-toggle="collapse" data-target="#eqsummary" onclick="eqs()">Answer 4: Capered</button><hr> 
 
\t </div> 
 
\t <div id="eqsummary"> 
 
\t  <div class="jumbotron"><p id="sum1"></p></div> 
 
\t </div> 
 
\t </div> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> \t 
 
    </body> 
 
</html>

瞭解更多關於JavaScript的比較運算符。 https://developer.mozilla.org/en/docs/Web/JavaScript/Guide/Expressions_and_Operators#Comparison_operators