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
