Bob wrote:
I get "generic" no matter
which button I click.
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
</HEAD>
<BODY>
<div id="zz" />
<script language="JavaScript1.2">
the language attribute is deprecated, better:
<script type="text/javascript">
FWIW, there is also a bug in javascript 1.2 (function objects do not
have a prototype object until called with the new operator) that would
prevent most prototyping code working anyway :)
function btn(txt){
A constructor function this.click = function(){ alert('generic');}
A method of every new btn object (not to be confused with the browser
supplied click method of form field elements)
this.b = document.createElement("INPUT");
with (this.b){
warning!!
The with clause will (likely) create properties on the window object if
they do not pre-exist as properties of the INPUT element. Consider
dropping the with clause, although it worked in Mozilla when tested. type = 'button';
value = txt;
onclick = this.click;
'this' refering to the btn object under construction, so the INPUT has
the onclick method created above: function(){ alert('generic');} }
return(this);
(aside: explicit return of the new object is not required. If the
contstructor does not return an object value, the new operator returns
the new object anyway) }
var btnA = new btn('button A');
Okay, INPUT btnA.b has the onclick handler assigned above document.all.zz.appendChild(btnA.b);
(aside: to run in Mozilla
document.getElementById('zz').appendChild(btnA.b)
var btnB = new btn('button B');
and btnB.b document.all.zz.appendChild(btnB.b);
(document.getElementById('zz').appendChild(btnB.b)
btnA.prototype.click = function(){ alert('button A pressed');}
function objects have a .prototype property for an object data type
value. btnA is a btn Object, without no property named 'prototype', so
this line generates javascript errors.
</script>
<p>Button A should show "button A pressed",<br>
Eh, why? Button B should show "generic"
</BODY>
</HTML>
Briefly the prototype of an object (taken from the .prototype property
of its constructor function at the time of object creation) will supply
inherited properties to all objects sharing the same prototype object,
provided individual (instance) object doen't have a local property set
with the same name.
FWIW an example with changes noted above and capitalising the first
letter of the constructor function:
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
</HEAD>
<BODY>
<div id="zz" />
<script type="text/javascript">
function Btn(txt, optOnClick){
this.b = document.createElement("INPUT");
this.b.type = 'button';
this.b.value = txt;
this.b.onclick = optOnClick || this.click;
}
Btn.prototype.click = function(){ alert('generic');}
var btnA = new Btn('button A',
function(){ alert('button A pressed')} );
document.getElementById('zz').appendChild(btnA.b);
var btnB = new Btn('button B');
document.getElementById('zz').appendChild(btnB.b);
</script>
<p>Button A should show "button A pressed",<br>
Button B should show "generic"
</BODY>
</HTML>
HTH,
Dom
