onclick Event
Example
Call a function when a button is clicked:
<button onclick="myFunction()">Click me</button>
Try it Yourself »
More examples below.
Description
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:
object.addEventListener("click", myScript);
Try it Yourself »
Technical Details
| Bubbles: | Yes |
|---|---|
| Cancelable: | Yes |
| Event type: | MouseEvent |
| Supported HTML tags: |
All except: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, and <title> |
More Examples
Click a <button> to display the date:
<button onclick="getElementById('demo').innerHTML = Date()">What is the time?</button>
Try it Yourself »
Click a <h3> element to change the text color:
<h3 id="demo" onclick="myFunction()">Click me to change my color.</h3>
<script>
function myFunction() {
document.getElementById("demo").style.color = "red";
}
</script>
Try it Yourself »
<script>
function myFunction() {
document.getElementById("demo").style.color = "red";
}
</script>
Another example on how to change the color of an element:
<h3 onclick="myFunction(this, 'red')">Click me to change my color.</h3>
<script>
function myFunction(element, color) {
element.style.color = color;
}
</script>
Try it Yourself »
<script>
function myFunction(element, color) {
element.style.color = color;
}
</script>
Click to copy text from one input field to another:
<button onclick="myFunction()">Copy Text</button>
function myFunction() {
document.getElementById("field2").value = document.getElementById("field1").value;
}
</script>
Try it Yourself »
function myFunction() {
document.getElementById("field2").value = document.getElementById("field1").value;
}
</script>
How to assign an "onclick" event to the window object:
window.onclick = myFunction;
function myFunction() {
document.getElementsByTagName("BODY")[0].style.backgroundColor = "yellow";
}
Try it Yourself »
function myFunction() {
document.getElementsByTagName("BODY")[0].style.backgroundColor = "yellow";
}
Use onclick to create a dropdown:
document.getElementById("myBtn").onclick = function() {myFunction()};
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
Try it Yourself »
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 |