頁面後使用Javascript/jQuery的運行腳本，渲染

我試圖讓從兩個功能，correct[]和wrong[]反饋，顯示爲用戶解答問題。我加了jQuery ready功能，試圖使我想要的一切提示過，但沒有成功出現。我已經將準備就緒的功能寫入我的代碼幾次，但沒有運氣。任何人都可以幫忙嗎？頁面後使用Javascript/jQuery的運行腳本，渲染

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html> 
 

 
<head> 
 
<meta charset="UTF-8"> 
 
<title>Simple Math Quiz</title> 
 
<script> 
 
     $("document").ready(function() { 
 
     $("body").css("background-color", "green"); 
 
     }); 
 
</script> 
 
</head> 
 
<body> 
 
    <br><br> 
 
    <p><em><strong>Feedback</strong></em></p><p><br><br> 
 
     <script> 
 
//Question array \t \t \t 
 
\t \t \t var question = ["1. What is 1+1?", 
 
         "2. What is 2+2?", 
 
         "3. What is 3+3?", 
 
         "4. What is 4+4?", 
 
\t \t \t \t \t \t \t \t "5. What is 5+5?" 
 
         ]; 
 
//Other Variables 
 
\t \t \t var qlength = question.length; 
 
\t \t \t var counter = 0; 
 
     var answer = ["2", "4", "6", "8", "10"]; 
 
//First box to tell the viewer whats going on 
 
\t \t \t alert('Answer the following 5 questions to determine if you are 1st grade smart.'); 
 
//Loop that asks the questions 
 
      \t for (var i = 0; i < qlength; i++) 
 
\t \t \t \t { 
 
\t \t \t \t \t var userAnswer = prompt(question[i]); //Stores the answer to each question in userAnswer 
 
\t \t \t \t \t \t //Actions for correct answer 
 
\t \t \t \t \t \t if (userAnswer == answer[i]) 
 
\t \t \t \t \t \t { 
 
\t \t \t \t \t \t \t alert('Correct'); \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t correct(i); 
 
\t \t \t \t \t \t \t var counter = counter + 1;  //Adds one to the counter for correct answers   
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t //Actions for wrong answer 
 
\t \t \t \t \t \t else 
 
\t \t \t \t \t \t { \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t alert('Wrong'); 
 
\t \t \t \t \t \t \t wrong(i); 
 
\t \t \t \t \t \t }    
 
\t \t \t \t } 
 
//Functions 
 
\t \t \t function correct(i) 
 
\t \t \t { 
 
\t \t \t \t document.write(i + 1, ". Correct" + "<br>"); 
 
\t \t \t } \t   
 
\t \t \t function wrong(i) 
 
\t \t \t { 
 
\t \t \t \t document.write(i + 1, ". Wrong, correct answer = ", answer[i], "<br>"); 
 
\t \t \t } 
 
//Calculates the results based on the counter 
 
\t \t \t document.write("<br>You got " + counter + " answers out of 5 correct.");  
 
\t \t </script> 
 
\t </p> 
 
</body> 
 

 
</html>

來源

2017-02-11 Erik

負荷後不要使用文件撰寫。而是使用一些標籤的innerHTML或.html（） – mplungjan

清理你的代碼。將您的JavaScript代碼（顯然排除將其鏈接。 –

此外，不要把你的jQuery腳本之前 –

負載後不要使用文件撰寫。它抹去頁面和腳本。而是更新標籤 - 在這裏我使用jQuery的你已經在使用追加答案

// These needed to be and STAY global 
 
// Question array \t \t \t 
 
var question = ["1. What is 1+1?", 
 
    "2. What is 2+2?", 
 
    "3. What is 3+3?", 
 
    "4. What is 4+4?", 
 
    "5. What is 5+5?" 
 
]; 
 
//Other Variables 
 
var qlength = question.length; 
 
var counter = 0; 
 
var answer = ["2", "4", "6", "8", "10"]; 
 

 

 
$("document").ready(function() { 
 
    $("body").css("background-color", "green"); 
 
    ask(); 
 
    $("#result").append("<br>You got " + counter + " answer"+(counter==1?"":"s")+" out of 5 correct."); 
 

 
}); 
 

 

 
function ask() { 
 
    //First box to tell the viewer whats going on 
 
    alert('Answer the following 5 questions to determine if you are 1st grade smart.'); 
 
    //Loop that asks the questions 
 
    for (var i = 0; i < qlength; i++) { 
 
    var userAnswer = prompt(question[i]); //Stores the answer to each question in userAnswer 
 
    //Actions for correct answer 
 
    if (userAnswer == answer[i]) { 
 
     alert('Correct'); 
 
     correct(i); 
 
     counter++; //Adds one to the counter for correct answers   
 
    } 
 
    //Actions for wrong answer 
 
    else { 
 
     alert('Wrong'); 
 
     wrong(i); 
 
    } 
 
    } 
 
} 
 

 

 
function correct(i) { 
 
    $("#result").append(i + 1, ". Correct" + "<br>"); 
 
} 
 

 
function wrong(i) { 
 
    $("#result").append(i + 1, ". Wrong, correct answer = ", answer[i], "<br>"); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p><em> <strong> Feedback </strong></em> 
 
</p> 
 
<p id="result"></p>

來源

2017-02-11 18:23:29 mplungjan

感謝您的幫助！ – Erik

歡迎您。請[閱讀如何接受答案]（http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work） – mplungjan

頁面後使用Javascript/jQuery的運行腳本，渲染

回答

相關問題