Obj is null, javascript

function init()

{

alert("init()");
    /**
     * Adds an event listener to onclick event on the start button.
     */
     xbEvent.addEventListener(document.getElementById("viewInvitation"), "click", function()
    {
        new Ajax().sendRequest("31260xml/invitations.xml", null, new PageMaster());

         xbEvent.addEventListener(document.getElementById("declinebutton"), "click", function ()
        {
           declineInvitation();
        });
     });

      

        
        
        
      

    

ok so I have a listerner function for the event, in case of click on mouse click, the program will fetch my xml file and run the main function-page where I created a discard button with id = "dropbutton", however this doesn't work, message about the error I am getting is obj = null or the program cannot find id = dropbutton, why is that? I created it when I called the page master using dom. any help would be appreciated.

function PageMaster()
{
    this.contentDiv = document.getElementById("content");
}

/**
 * Builds the main part of the web page based on the given XML document object
 *
 * @param {Object} xmlDoc   the given XML document object
 */
var subjectList;
var i;

PageMaster.prototype.doIt = function(xmlDoc)
{
    alert("PageMaster()");

alert("Clear page...");
this.contentDiv.innerHTML = "";

if (null != xmlDoc) 
{
    alert("Build page...");

    //create div Post
    var divPost = document.createElement("div");
    divPost.className = "post";

    //create h1 element
    var h1Element = document.createElement("h1");
    var headingText = document.createTextNode("Invitations");
    h1Element.appendChild(headingText);

    //insert h1 element into div post
    divPost.appendChild(h1Element);

    subjectList = xmlDoc.getElementsByTagName("subject");   
    var groupList = xmlDoc.getElementsByTagName("group");

    for (i = 0; i < subjectList.length; i++) //for each subject
    {
        var divEntry = document.createElement("div");
        divEntry.className = "entry";

        var subjectNum = subjectList[i].attributes[0].nodeValue;
        var subjectName = subjectList[i].attributes[1].nodeValue;
        var groupId = groupList[i].attributes[0].nodeValue;
        var groupName = groupList[i].attributes[1].nodeValue;
        var ownerId = groupList[i].attributes[2].nodeValue;

        //set up the invitation table attributes    


        var table=document.createElement("table");
        table.width = 411;
        table.border = 3;
        table.borderColor = "#990000"

        var input=document.createElement("p");
        var inputText=document.createTextNode("You are invited to join " + groupName + "(groupId : " + groupId +")");
        input.className="style11";
        var blank=document.createElement("nbps");
        input.appendChild(inputText);

        var acceptButton=document.createElement("input");
        acceptButton.type="button";
        acceptButton.id="acceptbutton";
        acceptButton.value="accept";

        var declineButton=document.createElement("input");
        declineButton.type="button";
        declineButton.id="declinebutton";
        declineButton.value="decline";

        table.appendChild(input);
        table.appendChild(acceptButton);
        table.appendChild(declineButton);
        divEntry.appendChild(table);

        var blankSpace = document.createElement("p");
        divEntry.appendChild(blankSpace);
        divPost.appendChild(divEntry);
    }

    //insert div post into div content
    this.contentDiv.appendChild(divPost);
    }
};

/**function getValueOf()
{
    return i;
}**/
function declineInvitation()
{
    alert("decline");
}
function acceptInvitation()
{
    alert("hello");
    /**var pos=getValueOf();
    alert(subjectList[pos].attributes[0].nodeValue);**/
}

      

        
        
        
      

    

This is my main function and I have definitely created a button. but it doesn't work.