Calling a function from another javascript file inside a javascript file

Question

I am trying to basically call a function from another javascript file (inside a javascript file) but it doesn't seem to work.

In my main.html i have declared both files like so:

<script type="text/javascript" src="Jquery/jquery-1.4.4.js"> </script>
<script type="text/javascript" src="src/Reply.js"> </script>
<script type="text/javascript" src="src/Comment.js"> </script>

and inside Comment.js I call the function Reply() that is inside Reply.js..

Comment.js:

function Comment(message){
    var self = this;
    var message = message;
    //
    var comment = document.createElement("li");
    comment.id = "comment";
    comment.style = "display: none;";
    comment.textContent = message;
    //empty reply field
    var replyField = document.createElement("ul");
    replyField.id = "replyField";
    //create the appropriate buttons
    createButtons(comment);
    //append the replyField
    comment.appendChild(replyField);
    //insert into wall
    var parent = document.getElementById("wall");
    parent.insertBefore(comment,parent.firstChild);
    //effect after insertion
    $("ul#wall li:first").fadeOut();
    $("ul#wall li:first").fadeIn();

    return comment;
}

function newReplyTxtBox(comment){
    var buttons = comment.getElementsByTagName("input");
    buttons.item(0).disabled="disabled";

    var replyBox = document.createElement("div");
    replyBox.id="replyBox";

    var replyTxt = document.createElement("input");
    replyTxt.id="replyTxt";
    replyTxt.type="text";
    replyTxt.value="Write a reply";
    replyTxt.onfocus = function(e){if(this.value==this.defaultValue) this.value='';};
    replyTxt.onblur= function(e){if(this.value=='') this.value=this.defaultValue;};
    replyBox.appendChild(replyTxt);

    createButtons(replyBox);

    comment.appendChild(replyBox);  
}

function newReply(replyBox){
    var message = $("input#replyTxt").val();
    var reply = new Reply(message);
    replyBox.parentNode.remove(replyBox);
    var replyField = replyBox.parentNode.getElementsByTagName("ul").item(0);
    replyField.appendChild(reply);
}

the newReply() is simply called once you click on the "reply button" which is create like so:

var submitBtn = button.cloneNode();
        submitBtn.value = "submit";
        submitBtn.addEventListener("click", function(){newReply(parent)},false);
        parent.appendChild(submitBtn);

Reply.js:

function Reply(replyMsg){
    var self = this;

    var reply = document.createElement("li");
    reply.id="reply"
    reply.textContent = replyMsg;

    var deleteBtn = document.createElement("input");
    deleteBtn.value = "delete";
    deleteBtn.addEventListener("click", function(){deleteReply(reply)},false);

    reply.appendChild(deleteBtn);

    return reply;
}
function deleteReply(reply){
    reply.parentNode.removeChild(reply);
}

Answer 1

in the newReply function, try changing replyBox.parentNode.remove(replyBox);

to replyBox.parentNode.removeChild(replyBox);