Html запустить скрипт кнопкой

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.

Источник

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.

Источник

How to Make Button onclick in HTML

The onclick attribute is an event attribute that is supported by all browsers. It appears when the user clicks on a button element. If you want to make a button onclick, you need to add the onclick event attribute to the element.

How to add URL to the window object

The button onclick runs a script when the user clicks a button. Let’s see an example where we have a button, clicking on which you’ll go to our website. To achieve this, we’ll just add the URL of the website to the window object.

Example of adding URL to the window object:

html> html> head> title>Title of the document title> head> body> button onclick="window.location.href='https://w3docs.com';">Click Here button> body> html>

You can also use a button onclick in order to know the current date just by adding «getElementById(‘demo’).innerHTML=Date()» to the onclick event.

Example of using a button onclick to know the current date:

html> html> head> title>Title of the document title> head> body> p>Click the button to see the current date. p> button onclick="getElementById('demo').innerHTML=Date()">What day is today? button> p id="demo"> p> body> html>

The onclick event is used to call a function when an element is clicked. That is why it is mostly used with the JavaScript function. Let’s consider an example where you need to click the button to set a function that will output a message in a element with id=»demo».

Example of adding an onclick event:

html> html> head> title>Title of the document title> head> body> p>There is a hidden message for you. Click to see it. p> button onclick="myFunction()">Click me! button> p id="demo"> p> script> function myFunction( ) < document.getElementById("demo").innerHTML = "Hello Dear Visitor!
 We are happy that you've chosen our website to learn programming languages. We're sure you'll become one of the best programmers in your country. Good luck to you!"; > script> body> html>

Источник