Question

How to check if a button is clicked or not in prototype JavaScript?

$('activateButton').observe('click', function(event) {
  alert(hi);
});

The code above is not working.

Answer 1

With this button:

<button id="mybutton">Click Me</button>

Use this:

$('mybutton').observe('click', function () {
  alert('Hi');
});

Tested and works, here.

You might want to encase it in a document.observe('dom:loaded', function () { }) thingy, to prevent it executing before your page loads.

Also, just an explanation:

The single dollar sign in Prototype selects an element by its id. The .observe function is very similar to jQuery’s .on function, in that it is for binding an event handler to an element.

Also, if you need it to be a permanent ‘button already clicked’ thingy, try this:

$('mybutton').observe('click', function () {
  var clicked = true;
  window.clicked = clicked;
});

And then, if you want to test if the button has been clicked, then you can do this:

if (clicked) {
  // Button clicked
} else {
  // Button not clicked
}

This may help if you are trying to make a form, in which you don’t want the user clicking multiple times.

How one may do it in jQuery, just for a reference:

$('#mybutton').on('click', function () {
  alert('Hi');
});

Note that, the jQuery code mentioned above could also be shortened to:

$('#mybutton').click(function () {
  alert('Hi');
});

jQuery is better in Prototype, in that it combines the usage of Prototype’s $ and $$ functions into a single function, $. That is not just able to select elements via their id, but also by other possible css selection methods.

How one may do it with plain JavaScript:

document.getElementById('mybutton').onclick = function () {
  alert('Hi');
}

Just for a complete reference, in case you need it.