Override method question

Bob · Sep 18, 2003

This seems to me like it should work but I get "generic" no matter
which button I click. Javascript is not one of my better languages.
Can the experts here take a look at this and tell me what I'm doing
wrong.

Thanks, Bob

<HTML>
<HEAD>
<TITLE> New Document </TITLE>
</HEAD>

<BODY>
<div id="zz" />
<script language="JavaScript1.2">
function btn(txt){
this.click = function(){ alert('generic');}

this.b = document.createElement("INPUT");
with (this.b){
type = 'button';
value = txt;
onclick = this.click;
}

return(this);
}

var btnA = new btn('button A');
document.all.zz.appendChild(btnA.b);

var btnB = new btn('button B');
document.all.zz.appendChild(btnB.b);

btnA.prototype.click = function(){ alert('button A pressed');}

</script>
<p>Button A should show "button A pressed",<br>
Button B should show "generic"
</BODY>
</HTML>

Dom Leonard · Sep 19, 2003

Bob said:
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

Bob · Sep 19, 2003

Dom Leonard said:
Bob wrote:

HTH,
Dom

Thanks for the help Dom, that was exactly what I was looking for.
Bob

Need Help, Both submit button works same, i need both submit button works differently, the one button override other button	3	Nov 9, 2022
Index.php with bootstrap implementation and extern sites inclusion	0	Oct 30, 2024
Make 'Image X' spin 360deg on y-Axis until reset button clicked	1	Jan 22, 2023
Google sheets song request	3	Apr 19, 2022
Only one table shows up with the information	2	Mar 29, 2023
How do I fix this issue in sqaurespace code block?	1	Jul 2, 2024
Help me sort out this script	1	Oct 17, 2023
Unable to add task to todo list	1	Sep 25, 2021

Override method question

Bob

Dom Leonard

Bob

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads