Open In App
Related Articles

HTML DOM onclick Event

Improve Article
Improve
Save Article
Save
Like Article
Like

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.


Last Updated : 25 Nov, 2022
Like Article
Save Article
Similar Reads
Related Tutorials