I have been going through the first example program in the Sitepoint Ajax book which creates a simple server request application.

One of the .js file that writes to the html file to create an input button. At first this was working fine, then when I reuploaded the files, none of the HTML was created.

As seen here: http://shanest.com/ajax/appmonitor2.html

Here are excerpted source codes. The main functions in question are this.toggleButton and this.currentAppState. Any idea what's wrong?

appmonitor2.html:
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<title>App Monitor</title>
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript" src="appmonitor2.js"></script>
<script type="text/javascript">
	var TARGET_URL = "fakeserver.php";
	var POLL_INTERVAL = 5;
	var MAX_POLL_ENTRIES = 10;
	var TIMEOUT_THRESHOLD = 10;
</script>
<link rel="stylesheet" href="appmonitor2.css" type="text/css" />
</head>
<body>
	<div id="wrapper">
		<div id="main">
			<div id="status">
				<div id="statusMessage">App Status:
					<span id="currentAppState"></span>
				</div>
				<div id="pollingMessage"></div>
				<br class="clearBoth" />
			</div>
			<div id="pollResults"></div>
			<div id="buttonArea"></div>
		</div>
	</div>
</body>
</html>
appmonitor2.js:
Code:
var Status = new function() {

	this.currOpacity = 100;
	this.proc = 'done'; // 'proc', 'done' or 'abort'
	this.procInterval = null;
	this.div = null;

	this.init = function() {
		var self = Status;
		self.div = document.getElementById('pollingMessage');
		self.setAlpha();
	};

	this.startProc = function() {
		var self = Status;
		self.proc = 'proc';
		if (self.setDisplay(false)) {
			self.currOpacity = 100;
			self.displayOpacity();
			self.procInterval = setInterval(self.doProc, 90);
	};

	this.stopProc = function() {
		var self = Status;
		if (done) {
			self.proc = 'done';
		}
		else {
			self.proc = 'abort';
		}
	};

	this.doProc = function() {
		var self = Status;
		if (self.currOpacity == 0) {
			if (self.proc == 'proc') {
				self.currOpacity = 100;
			}
			else {
				clearInterval(self.procInterval);
				if (self.proc == 'done') {
					self.startDone();
				}
				return false;
			}
		}
		self.curOpacity = self.currOpacity - 10;
		self.displayOpacity();
	};

	this.startDone = function() {
		var self = Status;
		if (self.setDisplay(true)) {
			self.currOpacity = 100;
			self.displayOpacity();
			self.procInterval = setInterval(self.doDone, 90);
		}
	};

	this.doDone = function() {
		var self = Status;
		if (self.currOpacity == 0) {
			clearInterval(self.procInterval);
		}
		self.currOpacity = self.currOpacity -10;
		self.displayOpacity();
	};

	this.cleanup = function() {
		Status.div = null;
	};

	this.displayOpacity = function() {
		var self = Status;
		var decOpac = self.currOpacity / 100;
		if (document.all && typeof window.opera == 'undefined') {
			self.div.filters.alpha.opacity = self.currOpacity;
		}
		else {
			self.div.style.MozOpacity = decOpac;
		}
		self.div.style.opacity = decOpac;
	};

	this.setAlpha = function() {
		var self = Status;
		if(document.all && typeof window.opera == 'undefined') {
			var styleSheets = document.styleSheets;
			for (var i = 0; i < styleSheets.length; i++) {
				var rules = styleSheets[i].rules;
				for (var j = 0; j < rules.length; j++) {
					if(rules[j].selectorText == '#pollingMessage') {
						rules[j].style.filter = 'alpha(opacity = 100)';
						return true;
					}
				}
			}
		}
		return false;
	};

	this.setDisplay = function() {
		var self = Status;
		var msg = '';
		if (done) {
			msg = 'Done';
			self.div.className = 'done';
		}
		else {
			msg = 'Processing...';
			self.div.className = 'processing';
		}
		if (self.div.firstChild) {
			self.div.removeChild(self.div.firstChild);
		}
		self.div.appendChild(document.createTextNode(msg));
		return true;
	};
}

var Monitor = new function(){
	this.targetURL = null;
	this.pollInterval = null;
	this.maxPollEntries = null;
	this.timeoutThreshold = null;
	this.ajax = new Ajax();
	this.start = 0;
	this.pollArray = [];
	this.pollHand = null;
	this.timeoutHand = null;
	this.reqStatus = Status;
	
	this.init = function() {
		var self = Monitor;
		self.targetURL = TARGET_URL;
		self.pollInterval = POLL_INTERVAL;
		self.maxPollEntries = MAX_POLL_ENTRIES;
		self.timeoutThreshold = TIMEOUT_THRESHOLD;
		self.toggleAppStatus(true);
		self.reqStatus.init();
	};
	
	this.toggleAppStatus = function(stopped) {
		var self = Monitor;
		self.toggleButton(stopped);
		self.toggleStatusMessage(stopped);
	};

	this.toggleButton = function(stopped) {
		var self = Monitor;
		var buttonDiv = document.getElementById('buttonArea');
		var but = document.createElement('input');
		but.type = 'button';
		but.classname = 'inputButton';
		if(stopped) {
			but.value = 'Start';
			but.onclick = self.pollServerStart;
		}
		else {
			but.value = 'Stop';
			but.onclick = self.pollServerStop;
		}
		if (buttonDiv.firstChild) {
			buttonDiv.removeChild(buttonDiv.firstChild);
		}
		buttonDiv.appendChild(but);
		buttonDiv = null;
	};

	this.toggleStatusMessage = function(stopped) {
		var statSpan = document.getElementById('currentAppState');
		var msg;
		if(stopped) {
			msg = 'Stopped';
		}
		else {
			msg = 'Running';
		}
		if (statSpan.firstChild) {
			statSpan.removeChild(statSpan.firstChild);
		}
		statSpan.appendChild(document.createTextNode(msg));
	};

	this.pollServerStart = function() {
		var self = Monitor;
		self.doPoll();
		self.toggleAppStatus(false);
	};

	this.pollServerStop = function() {
		alert('This will stop the application polling the server.');
	};

	this.doPoll = function() {
		var self = Monitor;
		var url = self.targetRL;
		var start = new Date();
		self.reqStatus.startProc();
		self.start = start.getTime();
		self.ajax.doGet(self.targetURL + '?start=' +self.start, self.showPoll);
		self.timeoutHand = setTimeout(self.handleTimeout, self.timeoutThreshold * 1000);
	};

	this.showPoll = function(str) {
		var self = Monitor;
		var diff = 0;
		var end = new Date();
		clearTimeout(self.timeotHand);
		self.reqStatus.stopProc(true);
		if(str == 'ok') {
			end = end.getTime();
			diff = (end - self.start) / 1000;
		}
		if(self.updatePollArray(diff)) {
			self.printResult();
		}
		self.doPollDelay();
	};

	this.doPollDelay = function() {
		var self = Monitor;
		self.pollHand = setTimeout(self.doPoll, self.pollInterval*1000);
	};

	this.handleTimeout = function() {
		var self = Monitor;
		if (self.stopPoll()) {
			self.reqStatus.stopProc(true);
			if (self.updatePollArray(0)) {
				self.printResult();
			}
			self.doPollDelay();
		}
	};

	this.updatePollArray = function(responseTime) {
		var self = Monitor;
		self.pollArray.unshift(pollResult);
		if (self.pollArray.length > self.maxPollEntries) {
			self.pollArray.pop();
		}
		return true;
	};

	this.printResult = function() {
		var self = Monitor;
		var polls = self.pollArray;
		var pollDiv = document.getElementById('pollResults');
		var entryDiv = null;
		var messageDiv = null;
		var barDiv = null;
		var clearAll = null;
		var msgStr = '';
		var txtNod = null;
		while (pollDiv.firstChild) {
			pollDiv.removeChild(pollDiv.firstChild);
		}
		for (var i = 0; i < polls.length; i++) {
			if (polls[i] == 0) {
				msgStr  '(Timeout)';
			}
			else {
				msgStr = polls[i] + ' sec.';
			}
			entryDiv = document.createElement('div');
			messageDiv = document.createElement('div');
			barDiv = document.createElement('div');
			clearAll = document.createElement('br');
			entryDiv.className = 'pollResult';
			messageDiv.className = 'time';
			barDiv.className = 'bar';
			clearAll.className = 'clearAll';
			if(polls[i] == 0) {
				messageDiv.style.color = '#933';
			}
			else {
				messageDiv.style.color = '#339';
			}
			barDiv.style.width = (parseInt(polls[i]*20)) + 'px';
			messageDiv.appendChild(document.createTextNode(msgStr));
			barDiv.appendChild(document.createTextNode('\u00A0'));
			entryDiv.appendChild(messageDiv);
			entryDiv.appendChild(barDiv);
			entryDiv.appendChild(clearAll);
			pollDiv.appendChild(entryDiv);
		}
	};

	this.stopPoll = function() {
		var self = Monitor;
		clearTimeout(self.pollHand);
		if (self.ajax) {
			self.ajax.abort();
		}
		clearTimeout(self.timeoutHand);
		return true;
	};

	this.cleanup = function() {
		var self = Monitor;
		self.reqStatus.cleanup();
		self.reqStatus = null;
	};
}

window.onload = Monitor.init;
window.onunload = Monitor.cleanup;
ajax.js:
Code:
function Ajax() {
	this.req = null;
	this.url = null;
	this.method = 'GET';
	this.async = true;
	this.status = null;
	this.statusText = '';
	this.postData = null;
	this.readyState = null;
	this.responseText = null;
	this.responseXML = null;
	this.handleResp = null;
	this.responseFormat = 'text', // 'text', 'xml', or 'object'
	this.mimeType = null;

	this.init = function() {
		if (!this.req) {
			try {
				// Try to create object for Firefox, Safari, IE7, etc.
				this.req = new XMLHttpRequest();
			}
			catch (e) {
				try {
					// Try to create object for later versions of IE.
					this.req = new ActiveXObject('MSXML2.XMLHTTP');
				}
				catch (e) {
					try {
						// Try to create object for early versions of IE.
						this.req = new ActiveXObject('Microsoft.XMLHTTP');
					}
					catch (e) {
						// Could not create an XMLHttpRequest object.
						return false;
					}
				}
			}
		}
		return this.req;
	};

	this.setMimeType = function(mimeType) {
		this.mimeType = mimeType;
	};
	
	this.doReq = function() {
		if (!this.init()) {
			alert('Could not create XMLHttpRequest object.');
			return;
		}
		this.req.open(this.method, this.url, this.async);
		if (this.mimeType) {
			try {
				req.overrideMimeType(this.mimeType);
			}
			catch (e) {
				// couldn't override MIME type -- IE6 or Opera?
			}
		}
		var self = this; // Fix loss-of-scope in inner function
		this.req.onreadystatechange = function() {
			var resp = null;
			if (self.req.readyState == 4) {
				switch (self.responseFormat) {
					case 'text':
						resp = self.req.responseText;
						break;
					case 'xml':
						resp = self.req.responseXML;
						break;
					case 'object':
						resp = req;
						break;
				}
				if (self.req.status >= 200 && self.req.status <= 299) {
					self.handleResp(resp);
				}
				else {
					self.handleErr(resp);
				}
			}
		};
		this.req.send(this.postData);
	};
	
	this.handleErr = function() {
		var errorWin;
		try {
			errorWin = window.open('', 'errorWin');
			errorWin.document.body.innerHTML = this.responseText;
		}
		catch (e) {
			alert('An error occurred, but the error message cannot be '
				+ 'displayed. This is probably because of your browser\'s '
				+ 'pop-up blocker.\n'
				+ 'Please allow pop-ups from this web site if you want to '
				+ 'see the full error messages.\n'
				+ '\n'
				+ 'Status Code: ' + this.req.status + '\n'
				+ 'Status Description: ' + this.req.statusText);
		}
	};

	this.abort = function() {
		if (this.req) {
			this.req.onreadystatechange = function() { };
			this.req.abort();
			this.req = null;
		}
	};

	this.doGet = function(url, hand, format) {
		this.url = url;
		this.handleResp = hand;
		this.responseFormat = format || 'text';
		this.doReq();
	};

}
appmonitor2.css:
Code:
body, p, div, td, ul {
	font-family: verdana, arial, helvetica, sans-serif;
	font-size:12px;
}

#wrapper {
	padding-top: 24px;
}

#main {
	width: 360px;
	height: 280px;
	padding: 24px;
	text-align: left;
	background: #eee;
	border: 1px solid #ddd;
	margin: auto;
}

#status {
	width: 358px;
	height: 24px;
	padding: 2px;
	background: #fff;
	margin-bottom: 20px;
	border: 1px solid #ddd;
}

#statusMessage {
	font-size: 11px;
	float: left;
	height: 16px;
	padding: 4px;
	text-align: left;
	color: #999;
}

#pollingMessage {
	font-size: 11px;
	float: right;
	width: 80px;
	height: 14px;
	padding: 4px;
	text-align: center;
	background: #fff;
}

#pollResults {
	width: 360px;
	height: 210px;
}

#buttonArea {
	text-align: center;
}

.pollResult {
	padding-bottom: 4px;
}

.time {
	width: 6em;
	float: left;
}

.bar {
	background: #ddf;
	float: left;
}

.clearBoth {
	clear: both;
}

.processing {
	color: #339;
	border: 1px solid #339;
}

.done {
	color: #393;
	border: 1px solid #393;
}

.inputButton {
	width: 8em;
	height: 2em;
}