javascript - TypeError : Argument 1 of Node. appendChild 没有实现接口(interface)Node

Question

嗨。我是面向对象的 JavaScript 新手，我不知道什么是接口(interface)节点？下面是我的代码，错误在 第 96 行。

此错误可能是什么原因以及如何解决？

window.onload=initAll;
////////////////////////////////////////////////////////////////////
var msg_dialog=new DialogBox();
var send_msg_but=new Button();
////////////////////////////////////////////////////////////////////
msg_dialog.tit="New Message";
msg_dialog.bod="The Message Body Shall Reside Here";
msg_dialog.fot=send_msg_but;
////////////////////////////////////////////////////////////////////
send_msg_but.label="Send";
send_msg_but.action=msg_dialog.done();
////////////////////////////////////////////////////////////////////
function initAll(){
    getDef();
}
function $(x){
    return document.getElementById(x);
}
function _(x){
    return document.createElement(x);
}
function getDef(){
    var xhr;
    var url="json/def.json";
    if(window.XMLHttpRequest){
        xhr=new XMLHttpRequest();
    }
    else{
        xhr=new ActiveXObject("Microsoft:XMLHTTP");
    }
    xhr.open("GET", url);
    xhr.onreadystatechange=function(){
        //creating the buffer div here creates 3 instances of the same object         because the state changes from 0 (initial) to 1, 2 then 3
        if(xhr.readyState==4 && xhr.status==200){
            var buffer=$("buffer");
            $("body_wrapper").removeChild(buffer);
            var data=xhr.responseText;
                data=JSON.parse(data);
            for(var i in data){
                var article=_("div");
                    article.setAttribute("id", "article");
                                                                                            ////////////////////////////////////////////////////////////////////
                var img=_("div");
                    img.setAttribute("id", "img");
                    var img_data=_("img");
                    img_data.src=data[i].img;
                img.appendChild(img_data);
                                                                                   /////////////////////////////////////////////////////////////////
            var caption=_("div");
                caption.setAttribute("id", "caption");
                                                                              //////////////////////////////////////////////////////////////////
            var title=_("div");
                title.setAttribute("id", "title");
                title.innerHTML=data[i].title;
                                                                                        /////////////////////////////////////////////////////////////////
            var story=_("div");
                story.setAttribute("id", "story");
                story.innerHTML=data[i].story;
                                                                                        ////////////////////////////////////////////////////////////////
            var hlink=_("div");
                hlink.setAttribute("id", "hlink");
                var a=_("a");
                a.href=data[i].href;
                a.innerHTML=data[i].htext;
                hlink.appendChild(a);
                                                                                          ///////////////////////////////////////////////////////////////
            caption.appendChild(title);
            caption.appendChild(story);
            caption.appendChild(hlink);
            article.appendChild(img);
            article.appendChild(caption);
            $("body_wrapper").appendChild(article);
        }
    }
}
xhr.send(null);
}
function DialogBox(){
    this.tit; this.bod; this.fot;
    this.render=function(){
    var win_width=window.innerWidth;
    var win_height=window.innerHeight;
    var dialog_box_width=(win_width*0.3); //measurements are in %
    ///////////////////////////////////////////////////////////////
    var dialog_box_overlay=$("dialog_box_overlay");
    dialog_box_overlay.style.display="block";
    ///////////////////////////////////////////////////////////////
    var dialog_box=$("dialog_box");
    dialog_box.style.left=(0.5*(win_width-dialog_box_width))+"px";                       //horizontally centre the div
        dialog_box.style.top=(0.1*win_height)+"px";
    dialog_box.style.width=dialog_box_width+"px";
    dialog_box.style.display="block";
    ///////////////////////////////////////////////////////////////
    $("dialog_box_head").innerHTML=this.tit;
    $("dialog_box_body").innerHTML=this.bod;
    $("dialog_box_foot").appendChild(this.fot);
}
this.done=function(){
    if(typeof $("dialog_box") !="undefined" && $("dialog_box")!=null){
        $("dialog_box").style.display="none";
    }
    if(typeof $("dialog_box_overlay") !="undefined" &&                                 $("dialog_box_overlay")!=null){
            $("dialog_box_overlay").style.display="none";
        }
                    if(typeof $("dialog_box_foot") !="undefined" &&                    $("dialog_box_foot")!=null){
            $("dialog_box_foot").innerHTML="";
        }
    }
} 
function Button(){
    var but_bod=_("span"); but_bod.setAttribute("class", "but");                             but_bod.addEventListener("click", this.action, false);     this.label;
}

Answer 1

问题是

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;

当您使用 msg_dialog=new DialogBox() 时，

• $("dialog_box_foot").appendChild(this.fot) 先运行
• msg_dialog.fot=send_msg_but 在那之后运行

我建议使用

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
);

此外，在 Button 中，您忘记返回 HTML 元素，以便使 send_msg_but 成为一个可以附加的节点:

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
}