页面后使用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>

+0

负荷后不要使用文件撰写。而是使用一些标签的innerHTML或.html() – mplungjan

+0

清理你的代码。将您的JavaScript代码(显然排除将其链接。 –

+0

此外,不要把你的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>

+0

感谢您的帮助! – Erik

+0

欢迎您。请[阅读如何接受答案](http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work) – mplungjan