Button on click event in javascript

How to use an HTML button to call a JavaScript function?

We use the onclick event attribute property of the HTML button to call a JavaScript function. The JavaScript code provided in the onclick attribute executes when the button is clicked. There are various attributes provided with the button tag in HTML that allows us to customize the button’s functionality and also let us decide how and what the button triggers.

Approach 1: Using the onclick event in JavaScript

The onclick event of the button element expects JavaScript code that is triggered when the button is clicked upon. So we put the function that needs to be called in the onclick property as well.

Syntax

This creates an HTML button with the name «click me» and triggers the «fun()» function.

Example 1

Here we will use an HTML button to call a JavaScript function. The associated function body executes when the button is clicked. Let’s look at the code for same.

!DOCTYPE html> html> title>Online Javascript Editor/title> head> /head> body> script> function fun()  document.getElementById("result").innerHTML = "The function fun() is triggered !"; > /script> Calling js function using HTML button br>br> button onclick = "fun()"> click me !/button> p> div id = "result"> /div> /p> /body> /html> 
 

In the above code, The function fun() is triggered when the button is clicked.

Approach 2: Using the ondblclick event in JavaScript

More options are provided to customize the execution of the JavaScript functions in different ways. for example, we can also set the function to be called only when the button is double-clicked. This can be done with the «ondblclick» event of the button tag.

Syntax

This creates an HTML button with the name «Button_Name» and triggers the «fun()» function when the button is double-clicked.

Example 2

Here we will use an HTML button to call a JavaScript function. The associated function body executes when the button is double-clicked.

!DOCTYPE html> html> title>Online Javascript Editor/title> head> /head> body> script> function fun()  document.getElementById("result").innerHTML = "The function fun() is triggered !"; > /script> h3>Calling js function using HTML button br>/h3> p> Double click "click me!" button /p> button ondblclick = "fun()"> click me ! /button> p> div id = "result"> /div> /p> /body> /html> 
 

In the above code, we have the «click me» button that triggers the fun() function when it is double clicked.

Approach 3: Using the onclick event of an input button

Buttons can also be part of forms that do some sort of validation and form submission. Buttons can also be created using the input tag provided by HTML. The onclick event attribute is again configured to handle the behavior of the button.

Syntax

This creates an HTML button with the name «Button_Name» and triggers the «fun()» function.

Let us look at an example to see this use case.

Example 3

We will create a button for submitting a mock form, this button triggers the JavaScript function provided in the onclick property.

!DOCTYPE html> html> title>Online Javascript Editor/title> head> /head> body> script> function fun()  document.getElementById("result").innerHTML = "The function fun() is triggered !"; > /script> Calling js function using HTML button br>br> form> label> Name : /label> input type = "text"> /input>br>br> input type = "button" onclick = "fun()" value = "submit"> /form> p> div id = "result"> /div> /p> /body> /html> 
 

In the above code, The function fun() is triggered when the submit button is clicked.

Approach 4: Using jQuery

As an alternative we can also use jQuery to attach the function to the button programmatically.

Syntax

This jQuery script checks for the readiness of the document and then attaches the function fun() to the click of the button having id as «Your_Button».

Let us look at an example to see this use case.

Example 4

We will create a HTML button and attach an event handler «onclick» to it programmatically using jQuery. Note that this attachment happens after the complete document has been rendered successfully.

The script in head tag imports the jQuery.

!DOCTYPE html> html> title>Online Javascript Editor/title> head> script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">/script> /head> body> Calling js function using HTML button br>br> button id="button"> click me !/button> p> div id="result"> /div> /p> script> $(document).ready(function()  $('#button').click(function()  fun(); >); >); function fun()  document.getElementById("result").innerHTML = "The function fun() is triggered !"; > /script> /body> /html> 
 

Conclusion

The onclick property of HTML buttons are a fast and effective way of attaching JavaScript functions to them.

Источник

Element: click event

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.

Syntax

Use the event name in methods like addEventListener() , or set an event handler property.

addEventListener("click", (event) => >); onclick = (event) => >; 

Event type

Event properties

This interface also inherits properties of its parents, UIEvent and Event . MouseEvent.altKey Read only Returns true if the alt key was down when the mouse event was fired. MouseEvent.button Read only The button number that was pressed (if applicable) when the mouse event was fired. MouseEvent.buttons Read only The buttons being pressed (if any) when the mouse event was fired. MouseEvent.clientX Read only The X coordinate of the mouse pointer in local (DOM content) coordinates. MouseEvent.clientY Read only The Y coordinate of the mouse pointer in local (DOM content) coordinates. MouseEvent.ctrlKey Read only Returns true if the control key was down when the mouse event was fired. MouseEvent.layerX Non-standard Read only Returns the horizontal coordinate of the event relative to the current layer. MouseEvent.layerY Non-standard Read only Returns the vertical coordinate of the event relative to the current layer. MouseEvent.metaKey Read only Returns true if the meta key was down when the mouse event was fired. MouseEvent.movementX Read only The X coordinate of the mouse pointer relative to the position of the last mousemove event. MouseEvent.movementY Read only The Y coordinate of the mouse pointer relative to the position of the last mousemove event. MouseEvent.offsetX Read only The X coordinate of the mouse pointer relative to the position of the padding edge of the target node. MouseEvent.offsetY Read only The Y coordinate of the mouse pointer relative to the position of the padding edge of the target node. MouseEvent.pageX Read only The X coordinate of the mouse pointer relative to the whole document. MouseEvent.pageY Read only The Y coordinate of the mouse pointer relative to the whole document. MouseEvent.relatedTarget Read only The secondary target for the event, if there is one. MouseEvent.screenX Read only The X coordinate of the mouse pointer in global (screen) coordinates. MouseEvent.screenY Read only The Y coordinate of the mouse pointer in global (screen) coordinates. MouseEvent.shiftKey Read only Returns true if the shift key was down when the mouse event was fired. MouseEvent.mozInputSource Non-standard Read only The type of device that generated the event (one of the MOZ_SOURCE_* constants). This lets you, for example, determine whether a mouse event was generated by an actual mouse or by a touch event (which might affect the degree of accuracy with which you interpret the coordinates associated with the event). MouseEvent.webkitForce Non-standard Read only The amount of pressure applied when clicking. MouseEvent.x Read only Alias for MouseEvent.clientX . MouseEvent.y Read only Alias for MouseEvent.clientY .

Usage notes

The MouseEvent object passed into the event handler for click has its detail property set to the number of times the target was clicked. In other words, detail will be 2 for a double-click, 3 for triple-click, and so forth. This counter resets after a short interval without any clicks occurring; the specifics of how long that interval is may vary from browser to browser and across platforms. The interval is also likely to be affected by user preferences; for example, accessibility options may extend this interval to make it easier to perform multiple clicks with adaptive interfaces.

Examples

HTML

JavaScript

const button = document.querySelector("button"); button.addEventListener("click", (event) =>  button.textContent = `Click count: $event.detail>`; >); 

Result

Try making rapid, repeated clicks on the button to increase the click count. If you take a break between clicks, the count will reset.

Specifications

Browser compatibility

See also

Found a content problem with this page?

This page was last modified on Jun 26, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

onclick Event

The onclick event occurs when the user clicks on an HTML element.

Mouse Events

Event	Occurs When
onclick	The user clicks on an element
oncontextmenu	The user right-clicks on an element
ondblclick	The user double-clicks on an element
onmousedown	A mouse button is pressed over an element
onmouseenter	The pointer is moved onto an element
onmouseleave	The pointer is moved out of an element
onmousemove	The pointer is moving over an element
onmouseout	The mouse pointer moves out of an element
onmouseover	The mouse pointer is moved over an element
onmouseup	The mouse button is released over an element

See Also:

Tutorial:

Syntax

In JavaScript, using the addEventListener() method:

Technical Details

Bubbles:	Yes
Cancelable:	Yes
Event type:	MouseEvent
Supported HTML tags:	All exept: , , , , , , , , , , and

More Examples

Click a to display the date:

Click a element to change the text color:

Click me to change my color.

Another example on how to change the color of an element:

Click me to change my color.

Click to copy text from one input field to another:

function myFunction() document.getElementById(«field2»).value = document.getElementById(«field1»).value;
>

How to assign an «onclick» event to the window object:

function myFunction() document.getElementsByTagName(«BODY»)[0].style.backgroundColor = «yellow»;
>

Use onclick to create a dropdown:

function myFunction() document.getElementById(«myDropdown»).classList.toggle(«show»);
>

Browser Support

onclick is a DOM Level 2 (2001) feature.

It is fully supported in all browsers:

Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	9-11

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник