onclick Event
Event Object
Example
Execute a JavaScript when a button is clicked:
<button onclick="myFunction()">Click me</button>
Try it yourself »
More "Try it Yourself" examples below.
Definition and Usage
The onclick event occurs when the user clicks on an element.
Browser Support
| Event |
|
|
|
|
|
| onclick |
Yes |
Yes |
Yes |
Yes |
Yes |
Syntax
In HTML:
<
element onclick="
myScript">
Try itIn JavaScript:
object.onclick=function(){
myScript};
Try it In JavaScript, using the addEventListener() method:
object.addEventListener("click",
myScript);
Try it Note: The addEventListener() method is not supported in Internet Explorer 8 and earlier versions.
Technical Details
| Bubbles: |
Yes |
| Cancelable: |
Yes |
| Event type: |
MouseEvent |
| Supported HTML tags: |
All HTML elements, EXCEPT: <base>, <bdo>, <br>,
<head>, <html>, <iframe>, <meta>, <param>, <script>,
<style>, and <title> |
| DOM Version: |
Level 2 Events |
More Examples
Example
Click on a <button> element to display the current day, date and time:
<button onclick="getElementById('demo').innerHTML=Date()">What
is the time?</button>
Try it yourself »
Example
Click on a <p> element to change its text color to red:
<p id="demo" onclick="myFunction()">Click me to change my text color.</p>
<script>
function myFunction() {
document.getElementById("demo").style.color = "red";
}
</script>
Try it yourself »
Example
Another example on how to change the color of a <p> element by clicking on it:
<p id="demo" onclick="myFunction(this, 'red')">Click me to change my text
color.</p>
<script>
function myFunction(elmnt,clr) {
elmnt.style.color = clr;
}
</script>
Try it yourself »
Example
Click on a button to copy some text from an input field to another input
field:
<button onclick="myFunction()">Copy Text</button>
<script>
function myFunction() {
document.getElementById("field2").value =
document.getElementById("field1").value;
}
</script>
Try it yourself »
Example
Assign the "onclick" event to the window object:
window.onclick = myFunction;
// If the user clicks in the window, set
the background color of <body> to yellow
function myFunction() {
document.getElementsByTagName("BODY")[0].style.backgroundColor = "yellow";
}
Try it yourself »
Related Pages
HTML DOM reference: ondblclick event
HTML DOM reference: onmousedown event
HTML DOM reference: onmouseup event
Event Object
Color Picker
