SimpleButton3o (for reference)

SimpleButton3o.html  [download]

<!DOCTYPE html>

<html>
<head>

<title>Comp 86 example SimpleButton3o</title>
<!-- Like SimpleButton3.html, using old class syntax -->

<script type="text/javascript">

/*
 * Old syle class definition
 * MyButton will *have* a captive HTML button, not *be* a button
 */
function MyButton (label, nocreate) {
	// Because this constructor is also called by subclass definition, below
	if (! nocreate) {
		// Instantiate our captive button and keep a pointer to it in ivar
		this.button = document.createElement("input");
		this.button.setAttribute ("type", "button");
		this.button.setAttribute ("value", label);
		document.getElementById("buttonarea").appendChild (this.button);

		// Our button event handler
		// NB "this" in function callback = the HTML element (ie, button)
		this.button.onclick = function () {
			document.getElementById("statusmsg").innerHTML =
			"Button labeled '" + this.value + "' was pushed ";
		}
	}
}

/*
 * Old-style inheritance syntax
 */
function RedButton (label, nocreate) {
	// Call the superclass' constructor
	MyButton.call (this, label, nocreate)

	this.button.style.color = "red";

	this.button.onclick = function () {
		document.getElementById("statusmsg").innerHTML =
		"RedButton labeled '" + this.value + "' was pushed ";
	}
}

// Also need to do these 2 things to inherit
RedButton.prototype = new MyButton ("", true);
RedButton.prototype.constructor = RedButton;

window.onload = function () {
	new MyButton ("Push me");
	new RedButton ("Push me also");
}

</script> 
</head>

<body>

<div id="buttonarea">
&nbsp;
</div>

<p><b>Status:</b> <span id="statusmsg">(Nothing pushed)</span></p>
</body>
</html>