469,643 Members | 1,452 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,643 developers. It's quick & easy.

Javascript Object Attach event not working

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>

Oct 22 '05 #1
4 2717
VK

bh********@gmail.com wrote:
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>


The posted code gives you "Object expected" error on load.
Could you post a working example of your problem?

Oct 22 '05 #2
VK wrote:
The posted code gives you "Object expected" error on load.
Could you post a working example of your problem?


VK
the code is a working logic.
In the line "click me after attaching event" , the word event gets
wrapped to the next line and gives the error.

line
this.button.setAttribute("VALUE","click me after attaching event");

with no wrapping should not give any error.

Thanks for all your help.

Oct 23 '05 #3
On 22/10/2005 12:51, bh********@gmail.com wrote:

[snip]
What am I doing wrong?
You're using a rather bizarre mix of DOM methods and proprietary IE
features. IE's behaviour is rather odd, but it can be avoided very
simply by going about each step rather more consistently. If you have
any intention of supporting other browsers - arguably a necessity if
you're working on something that will be public - changes will be essential.

[snip]
this.mainBody.appendChild(document.createElement(" input"));
this.button = this.mainBody.getElementsByTagName("input")[0];
Why didn't you just save a reference to the INPUT element in the first
place?
this.button.setAttribute("TYPE","BUTTON");
this.button.setAttribute("VALUE","click me after attaching event");
Attributes should be set before adding a newly-created element to any
document fragment, especially the type attribute (which is write-once).
It's also best to avoid the *Attribute methods as IE doesn't always
handle them well.

[snip]
canvas.innerHTML= this.mainBody.outerHTML;
Why not use the appendChild method?

oeventControl.prototype.paint = function(canvas) {
var mainBody = this.mainBody
= document.createElement('div'),
button = this.button
= document.createElement('input');

button.type = 'button';
button.value = 'Test';
button.style.color = 'red';

mainBody.appendChild(button);
canvas.appendChild(mainBody);
};

[snip]
oc.paint(document.all.controlPaintAear);


Use the getElementById method to obtain element references:

oc.paint(document.getElementById('controlPaintAear '));

The rest will work as-is. However, there are still issues with this code.

There is no feature detection. This may lead to errors and
uncontrollable failure in some browsers. How to rectify that would
depend on what you're actually trying to do.

The event listener you add dynamically to the INPUT element will cause a
memory leak. See
<URL:http://www.jibbering.com/faq/faq_notes/closures.html#clMem>.

Mike

--
Michael Winter
Prefix subject with [News] before replying by e-mail.
Oct 24 '05 #4
Thanks Mike
I did the changes as recommended and the code works fine now.

Oct 24 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

1 post views Thread by Darin Browne | last post: by
5 posts views Thread by Digital | last post: by
4 posts views Thread by David Veeneman | last post: by
3 posts views Thread by =?Utf-8?B?QmFycnkgR2lsYmVydA==?= | last post: by
reply views Thread by gheharukoh7 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.