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