Using click events on button click

Active3 hr before
Viewed126 times

10 Answers


More "Try it Yourself" examples below.,Execute a JavaScript when a button is clicked:,Click on a <button> element to display the current day, date and time:

 Pretag team - issue, fix, solve, resolve

An element receives a click event when a pointing device button (such as a mouse's primary mouse button) is both pressed and released while the pointer is located inside the element.,If the button is pressed on one element and the pointer is moved outside the element before the button is released, the event is fired on the most specific ancestor element that contained both elements.,click fires after both the mousedown and mouseup events have fired, in that order.

load more v

We can also trigger the event when a different element is clicked:,The mouse button is released while the pointer is inside the element.,The mouse button is depressed while the pointer is inside the element.

<div id="target"> Click here</div>
<div id="other"> Trigger the handler</div>
load more v

The onclick event executes a certain functionality when a button is clicked. This could be when a user submits a form, when you change certain content on the web page, and other things like that.,We can also separate our function totally from the eventListener and our functionality will still remain the same:,Note that the onclick attribute is purely JavaScript. The value it takes, which is the function you want to execute, says it all, as it is invoked right within the opening tag.

 Pretag team - issue, fix, solve, resolve

The following example draws a progress bar above the document and updates it to fill up as you scroll down:,As an example, the following program displays a bar and sets up event handlers so that dragging to the left or right on this bar makes it narrower or wider:,The following example registers "mousedown" handlers on both a button and the paragraph around it. When clicked with the right mouse button, the handler for the button calls stopPropagation, which will prevent the handler on the paragraph from running. When the button is clicked with another mouse button, both handlers will run.

 Pretag team - issue, fix, solve, resolve

In HTML, we can use the onclick attribute and assign a JavaScript function to it. We can also use the JavaScript's addEventListener() method and pass a click event to it for greater flexibility.,In this example, we are using the HTML onclick attribute and assigning a JavaScript's function to it. When the user clicks the given button, the corresponding function will get executed, and an alert dialog box will be displayed on the screen.,Let's see how to use onclick event by using some illustrations. Now, we will see the examples of using the onclick event in HTML, and in JavaScript.

 Pretag team - issue, fix, solve, resolve

The above code displays a button on the user’s screen with the text ‘Click me’. When clicked, function greet() will be invoked and ‘Hey there clicker!’ will be printed to the console.,The example below shows how an onclick event is assigned directly in the HTML document:,In the above example, the greet function declaration is assigned directly to the onclick method of the button.


function greet() {
   console.log('Hey there clicker!');
load more v

You have to put the event handler in the $(document).ready() event:,I need to have a button and handle its event in jQuery. And I am writing this code but it'snot working. Did I miss something?,WordPress Development

You have to put the event handler in the $(document).ready() event:

$(document).ready(function() {
   $("#btnSubmit").click(function() {
load more v

To make click event work add android:onClick attribute to the Button element in your XML layout. The value for this attribute must be the name of the method you want to call in response to a click event. The Activity hosting the layout must then implement the corresponding method.,If you have more than one button click event, you can use switch case to identify which button is clicked.,To implement View.OnClickListener in your Activity or Fragment, you have to override onClick method on your class.


We can assign a handler using a DOM property on<event>.,click – when the mouse clicks on an element (touchscreen devices generate it on a tap).,contextmenu – when the mouse right-clicks on an element.

<input value="Click me" onclick="alert('Click!')" type="button">
load more v

Other "button-click" queries related to "Using click events on button click"