Passing a function expression to be used as onclick handler for a button

Question

For a button, I need to set the function this calls, and the value used in that call, at runtime. I can do this like so:

var myfunction = /* ... */
var myvalue = /* ... */
button.setAttribute ("onclick", myfunction + "('" + myvalue + "')");

If I try instead:

button.setAttribute ("onclick", function () { myfunction(myvalue));

Firebug gives me a

"function statement requires a name"

even though, as far as I'm aware, I'm using a function expression here.

score 4 · Answer 1 · answered Dec 03 '11 at 10:41

4

button.onclick = function() {
    myfunction(myvalue);
}

Using the proper event registration method would be better though:

button.addEventListener('click', function() {
    myfunction(myvalue);
}, false);

answered Dec 03 '11 at 10:41

ThiefMaster

310,957
84
592
636

Using .onclick is fine - it is naturally cross-browser – hugomg Dec 03 '11 at 11:12
As soon as you need more than one function you'll have a problem though. And recent IEs do support addEventListener. – ThiefMaster Dec 03 '11 at 11:15

score 1 · Answer 2 · answered Dec 03 '11 at 10:40

You're missing a closing brace.

button.setAttribute ("onclick", function () { myfunction(myvalue));

should be

button.setAttribute ("onclick", function () { myfunction(myvalue); });

But you probably don't want to use setAttribute to set the onclick of a button, try button.onclick = function () { myfunction(myvalue); }; instead

score 0 · Answer 3 · answered Dec 03 '11 at 11:16

If you are considering pure JavaScript:

function attachEvent(element, event, handler)
{
    if (element && element.attachEvent) {
        element.attachEvent("on" + event, handler);
    }
    else if (element && element.addEventListener) {
        element.addEventListener(event, handler, false);
    }
}

USAGE:

attachEvent(button, "click", myFunction);

Please be noted, IE requires attachEvent and addEventListener doesn't work on IE and works on other browser. So you have to consider both of these functions to make it cross-browser support.

Passing a function expression to be used as onclick handler for a button

3 Answers3