I am new to JavaScript objects. The object creates a button with no
events attached. Later I want to attach an event to the button created
by this object. The event attaches a function in the object.
The code is listed below but the event is never attached.
The 'this' reference for the button seem to be correct and the
'self'
reference to the control(object) also seems to be correct.
What am I doing wrong?
<html>
<script>
// control
function oeventControl() {}
oeventControl.p rototype.paint = function(canvas ){
this.mainBody = document.create Element("div");
this.mainBody.a ppendChild(docu ment.createElem ent("input"));
this.button = this.mainBody.g etElementsByTag Name("input")[0];
this.button.set Attribute("TYPE ","BUTTON") ;
this.button.set Attribute("VALU E","click me after attaching
event");
this.button.sty le.color="red";
canvas.innerHTM L= this.mainBody.o uterHTML;
}
oeventControl.p rototype.neweve nt = function()
{
alert("new event attached");
}
oeventControl.p rototype.aevent = function(sColor )
{ // this button check using alert below
alert(this.butt on.outerHTML);
var self = this;
// self.newevent point to correct function
// self.newevent() ;
//
// why the code below does no attach the event and
// the color of the button does not change
this.button.onc lick=function() {self.newevent( );}
this.button.sty le.color=sColor ;
}
// end control
var oc;
function initPage(){
oc = new oeventControl() ;
oc.paint(docume nt.all.controlP aintAear);
}
function aEvent(){
oc.aevent("gree n");
}
</script>
<body onload="initPag e()">
<div id="controlPain tAear"></DIV>
<BR/>
<BR/>
<INPUT TYPE="BUTTON" VALUE="Attach Event to the Control Button"
onclick="aEvent ();">
</body>
events attached. Later I want to attach an event to the button created
by this object. The event attaches a function in the object.
The code is listed below but the event is never attached.
The 'this' reference for the button seem to be correct and the
'self'
reference to the control(object) also seems to be correct.
What am I doing wrong?
<html>
<script>
// control
function oeventControl() {}
oeventControl.p rototype.paint = function(canvas ){
this.mainBody = document.create Element("div");
this.mainBody.a ppendChild(docu ment.createElem ent("input"));
this.button = this.mainBody.g etElementsByTag Name("input")[0];
this.button.set Attribute("TYPE ","BUTTON") ;
this.button.set Attribute("VALU E","click me after attaching
event");
this.button.sty le.color="red";
canvas.innerHTM L= this.mainBody.o uterHTML;
}
oeventControl.p rototype.neweve nt = function()
{
alert("new event attached");
}
oeventControl.p rototype.aevent = function(sColor )
{ // this button check using alert below
alert(this.butt on.outerHTML);
var self = this;
// self.newevent point to correct function
// self.newevent() ;
//
// why the code below does no attach the event and
// the color of the button does not change
this.button.onc lick=function() {self.newevent( );}
this.button.sty le.color=sColor ;
}
// end control
var oc;
function initPage(){
oc = new oeventControl() ;
oc.paint(docume nt.all.controlP aintAear);
}
function aEvent(){
oc.aevent("gree n");
}
</script>
<body onload="initPag e()">
<div id="controlPain tAear"></DIV>
<BR/>
<BR/>
<INPUT TYPE="BUTTON" VALUE="Attach Event to the Control Button"
onclick="aEvent ();">
</body>
Comment