shinryu333 shinryu333 - 24 days ago 6
Javascript Question

Javascript: My <p> Content is Not Appearing When I Append Them With Javascript

I've been working on the following problem for a while now.


  1. Make a web service request every 1 second to http://courses.acs.uwinnipeg.ca/2909-001/assignments/A2Q2.php
    for 20 seconds. A JSON object will be returned. Count up the amount of circle and rectangle types and display
    the counts. The web service will occasionally return a status of 500 and these should also be counted and
    displayed.



Example output given

The above is an example of how my output should look like.

Here's what I got coded:



<!DOCTYPE html>
<html>
<head>
<script>
var xhr = new XMLHttpRequest();
var json;
var setIntervalCounter = 0;
var circleCounter = 0;
var rectangleCounter = 0;
var errorCounter = 0;
var repeatRequest = setInterval(function(){
xhr.onreadystatechange = incrementer();
xhr.open("GET", "http://courses.acs.uwinnipeg.ca/2909-001/assignments/A2Q2.php");
xhr.send();
setIntervalCounter++;
if (setIntervalCounter === 20){
clearInterval(repeatRequest)
}}, 1000);


if (setIntervalCounter === 20){

results();

}

//functions
function incrementer(){
json = xhr.responseText;
if (json.includes("circle")){
circleCounter++;
}
else if (json.includes("rectangle")){
rectangleCounter++;
}
else {
errorCounter++;
}
};

function results(){
var p1 = document.createElement("p");
var p2 = document.createElement("p");
var p3 = document.createElement("p");

p1.innerHTML = "There are " + circleCounter;
p2.innerHTML = "There are " + rectangleCounter;
p3.innerHTML = "There are " + errorCounter;

var div = document.getElementById("results");

div.appendChild(p1);
div.appendChild(p2);
div.appendChild(p3);
};
</script>
</head>
<body>
<div id = "results"></div>
</body>
</html>





So far I've fulfilled every criteria specified in the question, but I've run into an issue at the part where I have to display the counts. For some reason my page is blank even though I've appended all the content to my div. Any ideas?

Answer

I have updated the code slightly and it works for me:

<!DOCTYPE html>
<html>
<head>
<script>
	var xhr = new XMLHttpRequest();
	var json;
	var setIntervalCounter = 0;
	var circleCounter = 0;
	var rectangleCounter = 0;
	var errorCounter = 0;
	var repeatRequest = setInterval(function(){
		xhr.onreadystatechange = incrementer();
		xhr.open("GET", "http://courses.acs.uwinnipeg.ca/2909-001/assignments/A2Q2.php");
		xhr.send();
		setIntervalCounter++;
		if (setIntervalCounter === 20){
			clearInterval(repeatRequest);
			results();
		}
	}, 1000);
	
	/*
	if (setIntervalCounter === 20){
		debugger;
		results();
	
	}
	*/
	
	//functions
	function incrementer(){
		json = xhr.responseText;
		if (json.includes("circle")){
			circleCounter++;
		}
		else if (json.includes("rectangle")){
			rectangleCounter++;
		}
		else {
			errorCounter++;
		}
	}
	
	function results(){
		debugger;
		var p1 = document.createElement("p");
		var p2 = document.createElement("p");
		var p3 = document.createElement("p");
		
		p1.innerHTML = "There are " + circleCounter;
		p2.innerHTML = "There are " + rectangleCounter;
		p3.innerHTML = "There are " + errorCounter;
		
		var div = document.getElementById("results");
		
		div.appendChild(p1);
		div.appendChild(p2);
		div.appendChild(p3);
	}
</script>
</head>
<body>
<div id = "results"></div>
</body>
</html>

Your problem was the execution order of code,
In your code version - this line:

if (setIntervalCounter === 20){

Was running before the interval count, and it never run again when the counter gets to 20, what I have done that after clearing the interval I call the results() function just after the clearInterval.

If you put break points and debug through the code you will realize the issue.

Comments