obj is null, javascript

Question

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 what I have here is a event listerner function, the case is when viewInvitation is clicked , the program will fetch my xml file and run page master function where I created my decline button with id="declinebutton", however this does not work, the error message that i get is obj=null or the program could not find id = declinebutton, why is it so? I have created it when I called page master using dom. any help will 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);**/
}

That's my page master function, and I definitely have created the button. but it does not work.

Answer 1

Try calling your function like this:

window.onload=init;

The javascript runs as the page loads. At that point, the element does not yet exist in the DOM tree. You'll need to delay the script until the page has loaded.

Answer 2

The example you gave doesn't create the "Decline" button, as your question suggests it should. If it should, you might want to look at that.

Of course, if the button already exists, please disregard this answer.

Answer 3

You have a listener inside a listener. Is that right?

What about this?:

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

Answer 4

As far as I understand, you create button with id="declinebutton" for each entry from xml, is that right? If yes, I'd suggest you to generate different id's for each button (for example, append line index to 'declinebutton', so you have buttons 'declinebutton0', 'declinebutton1' an so on), and assign event listener to buttons separately in the loop.