Onclick event not firing

Question

Onclick event not firing

var subjectList;

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
 */

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 (var 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"

        tableRow = table.insertRow(0);
        tableCell = tableRow.insertCell(0);

        var cellContent = "";

        //create invitation message
        var invitationMsg = "<p>Subject : " + subjectNum + " - " + subjectName + "</p>";
        invitationMsg += "<p>You are invited to join " + groupName + " (groupId : " + groupId + ") by owner Id:" + ownerId + "</p>";
        cellContent += invitationMsg;

        //create buttons
        cellContent += "<input type='button' id='acceptButton" + i + "' value='Accept' onclick='acceptInvitation(i)'>"
        cellContent += "<input type='button' id='declineButton" + i + "' value='Decline'>"

        tableCell.innerHTML = cellContent;

        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 acceptInvitation(i)
{
    alert("hello");
    //alert(subjectList[i].attributes[0].nodeValue);
}

above is an extract of my javascript code. What the code does is create an inviting group table from an xml file with an accept and reject button. when the user clicks accept, the table will disappear and the below table will move up. For now I'm only testing my accept button to see if it works. But my onclick function in accept button is not working for some reason I don't understand. the warning in acceptInvitation () is not read. Any help would be appreciated. Thanks to

0

javascript

chris May 26 '09 at 6:20

a source to share

4 answers

PatrikAkerstrand · Answer 1 · 2009-05-26T06:27:58+0000

What about:

cellContent += "[...] onclick='acceptInvitation("+i+")'>"

This ensures that I am evaluating with the value of the variable and not as a literal

SvenFinke · Answer 2 · 2009-05-26T06:26:53+0000

Try calling it like this:

onclick='acceptInvitation();'

Not like this

onclick='acceptInvitation(i)'

Jonathan Fingland · Answer 3 · 2009-05-26T06:33:13+0000

perhaps without addressing the central issue,

onclick='acceptInvitation(i)'

in this case it i

will be undefined.

onclick='acceptInvitation("+i+")'

solves at least one problem. Also, you are using an unusual mixture of innerHTML and DOM methods. Why not stick with DOM methods and use attachEvent / AddEventListener?

edit: There is a good article on the list on variable binding at http://www.alistapart.com/articles/getoutbindingsituations/

Below is a somewhat specialized example. See the article for a more generalized case (or use a library like Prototype )

var click_hdlr = function() {
    return function() {
        return acceptInvitation.apply(this,arguments);
    }
}

var acc_btn = document.createElement("input");
acc_btn.setAttribute("type","button");
acc_btn.setAttribute("id","accept");
acc_btn.setAttribute("value","Accept");
acc_btn.addEventListener("click",click_hdlr(i),false);

Rune FS · Answer 4 · 2009-05-26T06:34:55+0000

Don't know what is causing your problem, but you are getting onclick = 'acceptInvitation (i)' I am assuming you want to output acceptInvitation (value-i) i.e. acceptInvitation ("+ i +")

Onclick event not firing

More articles: