HTML DOM onclick Event
Last Updated :
26 Nov, 2024
Improve
The HTML DOM onclick event occurs when the user clicks on an element.
In HTML:
<element onclick="myScript"><!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">Click me</button>
<p id="gfg"></p>
<script>
function myFunction() {
document.getElementById(
"gfg").innerHTML = "GeeksforGeeks";
}
</script>
</body>
</html>
In JavaScript:
object.onclick = function(){myScript};<!DOCTYPE html>
<html>
<body>
<p id="gfg">Click me.</p>
<script>
document.getElementById("gfg").onclick = function () {
GFGfun()
};
function GFGfun() {
document.getElementById(
"gfg").innerHTML = "YOU CLICKED ME!";
}
</script>
</body>
</html>
In JavaScript, using the addEventListener() Method:
object.addEventListener("click", myScript);<!DOCTYPE html>
<html>
<body>
<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>
</body>
</html>
HTML DOM onclick event supports All HTML elements,
Except:
<base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, and <title>
