Javascript/Jquery run script after page is rendered

Question 1

I am trying to make the feedback from the two functions, correct[] and wrong[], show up as the user answers the questions. I added the jQuery ready function to attempt to make everything I want appear before the prompts but without success. I have written the ready function into my code several times with no luck. Can anybody help?

<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			
			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"];
//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);
							var counter = counter + 1; //Adds one to the counter for correct answers 
						}
						//Actions for wrong answer
						else
						{						
							alert('Wrong');
							wrong(i);
						} 
				}
//Functions
			function correct(i)
			{
				document.write(i + 1, ". Correct" + "<br>");
			}	 
			function wrong(i)
			{
				document.write(i + 1, ". Wrong, correct answer = ", answer[i], "<br>");
			}
//Calculates the results based on the counter
			document.write("<br>You got " + counter + " answers out of 5 correct."); 
		</script>
	</p>
</body>
</html>

Question 2

NEVER use document.write after load. Instead use some tag's innerHTML or .html()

Question 3

Clean up your Code. Place your JavaScript code (obviously excluding <script>) into a [.js] file and link it using <script src="myscript.js"></script>.

Question 4

Also, don't put your jQuery script before <html>

Question 5

@ Ty Q. I understand that, when I used the snippet it added that script to my code by default. I'll move it next time a post a question. Thanks again.

Question 6

NEVER use document.write after load. It wipes the page and scripts. Instead update a tag - here I use the jQuery you already use to append the answers

// These needed to be and STAY global
// Question array			
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>

Question 7

Thanks for the help!

mplungjan 180k29 gold badges183 silver badges246 bronze badges · Accepted Answer · 2017-02-11 18:23:29Z

NEVER use document.write after load. It wipes the page and scripts. Instead update a tag - here I use the jQuery you already use to append the answers

// These needed to be and STAY global
// Question array			
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>

CollectivesTM on Stack Overflow

Javascript/Jquery run script after page is rendered

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Hot Network Questions

CollectivesTM on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Related