HTML | DOM onclick Event
The HTML DOM onclick event occurs when the user clicks on an element.
HTML DOM onclick event supports All HTML elements, EXCEPT:
- <base>
- <bdo>
- <br>
- <head>
- <html>
- <iframe>
- <meta>
- <param>
- <script>
- <style>
- <title>
Syntax:
In HTML:
<element onclick="myScript">
In JavaScript:
object.onclick = function(){myScript};
In JavaScript, using the addEventListener() method:
object.addEventListener("click", myScript);
Example 1: Using HTML
<!DOCTYPE html> <html> <body> <center> <h1 style="color:green"> GeeksforGeeks </h1> <h2>HTML DOM onclick Event</h2> <button onclick="myFunction()">Click me</button> <p id="demo"></p> <script> function myFunction() { document.getElementById( "demo").innerHTML = "GeeksforGeeks"; } </script> </center> </body> </html> |
chevron_right
filter_none
Output:
Example 2: Using JavaScript
<!DOCTYPE html> <html> <body> <center> <h1 style="color:green"> GeeksforGeeks </h1> <h2>HTML DOM onclick Event</h2> <p id="demo">Click me.</p> <script> document.getElementById("demo").onclick = function() { GFGfun() }; function GFGfun() { document.getElementById( "demo").innerHTML = "YOU CLICKED ME!"; } </script> </center> </body> </html> |
chevron_right
filter_none
Output:
Before:
After:
Example 3: In JavaScript, using the addEventListener() method:
<!DOCTYPE html> <html> <body> <center> <h1 style="color:green"> GeeksforGeeks </h1> <h2>HTML DOM onclick Event</h2> <p id="demo">Click me.</p> <script> document.getElementById( "demo").addEventListener("click", GFGfun); function GFGfun() { document.getElementById( "demo").innerHTML = "YOU CLICKED ME!"; } </script> </center> </body> </html> |
chevron_right
filter_none
Output:
Before:
After:
Supported Browsers: The browsers supported by DOM onclick Event are listed below:
- Google Chrome
- Internet Explorer
- Firefox
- Apple Safari
- Opera
Recommended Posts:
- HTML | onclick Event Attribute
- How to stop event propagation with inline onclick attribute in JavaScript ?
- HTML | DOM onabort Event
- HTML | DOM fullscreenchange Event
- HTML | DOM ondblclick Event
- HTML | DOM onload Event
- HTML | DOM ondragend Event
- HTML | DOM onkeyup Event
- HTML | DOM ondragstart Event
- HTML | DOM onkeypress Event
- HTML | DOM onerror Event
- HTML | DOM onpaste Event
- HTML | DOM ondragenter Event
- HTML | DOM oncopy Event
- HTML | DOM onbeforeunload Event
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.
