The problem is
function DialogBox(){
$("dialog_box_head").innerHTML=this.tit;
$("dialog_box_body").innerHTML=this.bod;
$("dialog_box_foot").appendChild(this.fot);
}
var msg_dialog=new DialogBox();
msg_dialog.tit="New Message";
msg_dialog.bod="The Message Body Shall Reside Here";
msg_dialog.fot=send_msg_but;
When you use msg_dialog=new DialogBox()
,
$("dialog_box_foot").appendChild(this.fot)
runs firstmsg_dialog.fot=send_msg_but
runs after that
I suggest using
function DialogBox(tit, bod, fot){
$("dialog_box_head").innerHTML = this.tit = tit;
$("dialog_box_body").innerHTML = this.bod = bod;
$("dialog_box_foot").appendChild( this.fot = fot );
}
var msg_dialog=new DialogBox(
"New Message";
"The Message Body Shall Reside Here";
send_msg_but
);
Moreover, in Button
you forgot to return the HTML element, in order to make send_msg_but
a node, which can be appended:
function Button(){
var but_bod=_("span");
but_bod.setAttribute("class", "but");
but_bod.addEventListener("click", this.action, false); // Note `this.action` is undefined
this.label; // This does nothing, so better remove it
return but_bod; // Add this
}