Having trouble getting a button element to fire its onclick event properties once appended to a div element called scrollPanel which is also appended to a div element named panel body in the document tree.

Example:
Here is a simple version of the event I have tried to run….it works
Code JavaScript:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<script language="javascript" type="text/javascript">
		//Basic Test
		var hidebtn = document.createElement("input");
			hidebtn.type = "Submit";
			hidebtn.value = "Test Button";
			hidebtn.attachEvent("onclick",clickme);
 
		function clickme()
		{
		alert("yo");
		}			
			document.body.appendChild(hidebtn);
</script>
</body>
</html>

“But what I want to do, is have this button be part of a larger component with many different elements that I can instantiate many instances of and add to the page document”


This is how i have defined the test button object
Code JavaScript:
function Button()
	{
		this.btn = document.createElement("input");
		//this.setButton();
	}
 
	Button.prototype.setButton = function()
	{
		var oThis = this;
		this.btn.type = "Submit";
		this.btn.value = "Test Button";
		this.btn.title = "test";
		return this.btn;
	}
 
	Button.prototype.btnClick = function()
	{
		alert("yo");	
	}

i can create an instance of this and it appends to the div element okay shows up in the page document...

Now i attempt to add an event propertie to the button using attachEvent() method

Code JavaScript:
	function Button()
	{
		this.btn = document.createElement("input");
		//this.setButton();
 
	}
 
	Button.prototype.setButton = function()
	{
		var oThis = this;
		this.btn.type = "Submit";
		this.btn.value = "Test Button";
		this.btn.title = "test";
		this.btn.onclick = 
		this.btn.attachEvent("onclick",oThis.btnClick(),true);	
		return this.btn;
	}
 
	Button.prototype.btnClick = function()
	{
		alert("yo");	
	}

Now the scrollpanel is created by another class called Directory
and its appendButton() method gets called from a asynchronous response...

inside the appendButton() i have declared the Button object variable and append it to the scroll panel....
Code JavaScript:
Directory.prototype.appendButton = function()
	{
		var dPanel = document.getElementById("dpScroll");
		var btn = new Button();
		var myBtn = btn.setButton();
		alert(btn.constructor);
		dPanel.appendChild(myBtn); 	
	}

Problem
"the button shows up in the document okay but when i go to click it nothing happen's"

i have tryed this

Example
Code JavaScript:
function Button()
    {
        this.btn = document.createElement("input");
        //this.setButton();
    }
 
    Button.prototype.setButton = function()
    {
        var oThis = this;
        this.btn.type = "Submit";
        this.btn.value = "Test Button";
        this.btn.title = "test";
        this.btn.onclick = function()
       {
         alert("yo");
       }
        return this.btn;
    }

I can't get the Button object to fire its onclick event...
funny thing is i have click events defined in the Directory class that work okay...
causing me confussion, would appreciate if any one can help me out...