javascript pass function to onclick event

Question

I have to write a function which will create a HTML code of a tag and this function will also pass a function handler to onclick event of created a tag. Code:

function a(text,functionHandler){
    return '<a href="#" onclick="'+functionHandler+'">'+text+'</a>';
}

//usage
var a1 = a('link',function(){
   alert('test');
});

Passing the function to string doesn't work. So my question is: how to pass a function handle to onclick event and get a HTML code of created a tag?

Answer 1

Your current approach has a couple of problems -

1. function is a keyword. You cannot use it as a parameter.
2. The way you are using it, you need function name here. Passing a callback won't help.

Rather than returning your anchor as a string, return it as an element -

function createAnchor(text, clickHandler) {
    var link = document.createElement('a');    // creates an anchor element
    link.href = "#";                           // sets the href
    link.onclick = clickHandler;               // sets the click handler
    link.innerHTML = text;                     // assigns the inner html string

    return link;                               // now return it
}

and then -

var myAnchor = createAnchor('link', function () {
    alert('test');
});

// Add this element wherever you want

See the documentation on createElement and element.

EDIT

If you want to add this anchor element to an existing DOM element as a child, use the appendChild -

var myAnchor = createAnchor('link', function () {
    alert('test');
});

document.getElementById('x').appendChild(myAnchor);

Live JSFiddle.

EDIT 2

If you really want your anchor string, then create the anchor element using the above function, append it as a child to your desired element, and then use innerHTML on the parent. The approach is demonstrated here -

function createAnchorString(parentId, text, clickHandler) {
    var link,
        parent;

    link = createAnchor(text, clickHandler);    // call the previous function
    parent = document.getElementById(parentId);
    parent.appendChild(link);

    return parent.innerHTML;
}

var myAnchorString = createAnchorString('x', 'link', function () {
    alert('test');
});

alert(myAnchorString);

Live Fiddle.

Answer 2

You could try like this :

function a(text, callback)
{
    var obj = document.createElement("a");

    obj.textContent = text;
    obj.onClick = callback;
    return obj.outerHTML;
}

The question is : How will it handle the anonymous function passed as callback argument ?

EDIT This should work now :

function a(text, callback){
    return '<a href="#" onclick="if(!this.fireFunc)this.fireFunc='
            + callback.toString()
            + ';this.fireFunc();">'+text+'</a>';
}

Just using toString() on an anonymous function permits you to get its code.

This is a very hackish way, and doesn't work on named functions (It wouldn't be hard now to make it work).

FIDDLE http://jsfiddle.net/gZ3YD/1/