The HTML DOM onclick event occurs when the user clicks on an element.
There are three ways to add onclick events:
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
html
<center>
<h2>HTML DOM onclick Event in Html</h2>
<button onclick="myFunction()">Click me</button>
<p id="gfg"></p>
<script>
function myFunction() {
document.getElementById(
"gfg").innerHTML = "GeeksforGeeks";
}
</script>
</center>
|
Output:
Example 2: Using JavaScript
html
<center>
<h2>HTML DOM onclick Event</h2>
<p id="gfg">Click me.</p>
<script>
document.getElementById("gfg").onclick = function() {
GFGfun()
};
function GFGfun() {
document.getElementById(
"gfg").innerHTML = "YOU CLICKED ME!";
}
</script>
</center>
|
Output:
Example 3: In JavaScript, using the addEventListener() method:
html
<center>
<h2>HTML DOM onclick Event</h2>
<p id="gfg">Click me.</p>
<script>
document.getElementById(
"gfg").addEventListener("click", GFGfun);
function GFGfun() {
document.getElementById(
"gfg").innerHTML = "YOU CLICKED ME!";
document.getElementById(
"gfg").style.color = 'red';
document.getElementById(
"gfg").style.background = 'cyan';
}
</script>
</center>
|
Output:
HTML DOM onclick event supports All HTML elements,
Except:
<base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, and <title>
We have a complete list of HTML DOM methods, to check those please go through this HTML DOM Object Complete reference article.
Supported Browsers: The browsers supported by DOM onclick Event are listed below.
- Google Chrome
- Internet Explorer
- Firefox
- Apple Safari
- Opera
We have a Cheat Sheet on Javascript where we covered all the important topics of Javascript to check those please go through Javascript Cheat Sheet-A Basic guide to JavaScript.