Changing the onclick event delegate of an HTML button?

Question

How do you change the JavaScript that will execute when a form button is clicked?

I've tried changing its onClicked and its onclicked child attributes like so:

$('mybutton').onClick = 'doSomething';

and

$('mybutton').attributes["onclick"] = 'doSomething()';

Neither seem to work. My other options are:

1. To have two buttons and hide one and show the other.
2. To have it directed to a function that evals a string and change the string to the function I want to execute.

Neither seem very elegant.

I'm using Prototype as a js library so it that has any useful tools I can use them.

Answer 1

For Prototype, I believe that it would be something like this:

$("mybutton").observe('click', function() {
     // do something here
});

EDIT: Or, as it says in the documentation, you could simply specify the function you want to call on click:

$('mybutton').observe('click', respondToClick);

function respondToClick(event) {
    // do something here
}

But this is all, again, Prototype-specific.

Answer 2

The general way to set an onclick handler in javascript is to set onclick to a function, by passing it the name of a function directly, not in a string. So if myButton is set to a DOM Element, you would write:

myButton.onclick = doSomething;

So when you click the 'mybutton' button, the doSomething function will be called as doSomething(). For anonymous functions, you can write:

myButton.onclick = function() {
    alert("myButton was clicked!");
};

Answer 3

In JQuery it's

$("#myButtonId").click(myFunction);


function myFunction(){
 alert("Clicked");
}

Or if you want to put the function inline:

$("#myButtonId").click(function(){
     alert("Clicked");
});

If you are using JQuery firstly make sure you use the relevant selector prefix (IE: If your using the Id of the element put a # in front of it). Secondly it's the click method to assign a callback to the click event.

Answer 4

Last I used Prototype, it was something like this:

Event.observe('mybutton', 'click', doSomething);

By the way, your examples might've even worked if you didn't quote the function names.

EDIT: Yes, Element.observe(element, eventName, handler) and someElement.observe(eventName, handler) also work. And don't quote the handler name - you want to pass the function not a string!

Answer 5

Using the Prototype framework you can do:

Event.observe("mybutton", "click", clickHandler);

or:

Event.observe("mybutton", "click", function() {
  alert("Button clicked!");
});

or:

$("mybutton").observe("click", clickHandler);

or:

$("mybutton").observe("click", function() {
  alert("Button clicked!");
});

• See the Event class documentation