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.prototype.paint = function(canvas){
this.mainBody = document.createElement("div");
this.mainBody.appendChild(document.createElement(" input"));
this.button = this.mainBody.getElementsByTagName("input")[0];
this.button.setAttribute("TYPE","BUTTON");
this.button.setAttribute("VALUE","click me after attaching
event");
this.button.style.color="red";
canvas.innerHTML= this.mainBody.outerHTML;
}
oeventControl.prototype.newevent = function()
{
alert("new event attached");
}
oeventControl.prototype.aevent = function(sColor)
{ // this button check using alert below
alert(this.button.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.onclick=function(){self.newevent();}
this.button.style.color=sColor;
}
// end control
var oc;
function initPage(){
oc = new oeventControl();
oc.paint(document.all.controlPaintAear);
}
function aEvent(){
oc.aevent("green");
}
</script>
<body onload="initPage()">
<div id="controlPaintAear"></DIV>
<BR/>
<BR/>
<INPUT TYPE="BUTTON" VALUE="Attach Event to the Control Button"
onclick="aEvent();">
</body>
