Thanks to visit codestin.com
Credit goes to www.geeksforgeeks.org

Open In App

HTML onclick Event Attribute

Last Updated : 26 Jun, 2024
Comments
Improve
Suggest changes
3 Likes
Like
Report

The onclick event attribute in HTML triggers when the user clicks on an element. It executes a script or function upon a click event and is commonly used for interactive elements like buttons and links.

Syntax

<element onclick = "script">

Attribute Value

This attribute contains a single value script that works when the mouse clicks on the element.

Example 1: Display Date & Time on Button Click

This example shows a simple onclick event where clicking the button displays the current date and time.

HTML 
<!DOCTYPE html>
<html>

<head>
    <title>HTML onclick Event Attribute</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            font-family: sans-serif;
        }

        h2 {
            color: green;
        }
    </style>
</head>


<body>
    <h2>GeeksforGeeks</h2>
    <h3>HTML onClick Event Attribute</h3>
    <span>
        Click the button to see the date & time.
    </span>
    <button onclick="getElementById('time').
    innerHTML= Date()">
        Show Date
    </button>
    <p id="time"></p>

</body>

</html>

Output:

HTML-onclick
HTML onclick Event Attribute Example Output

Example 2: Display Text on Click

In this example, when the "Click Here" will be clicked then the text "Welcome to GeeksforGeeks" will be displayed.

HTML 
<!DOCTYPE HTML>
<html>

<head>
    <title>HTML onclick event attribute </title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            font-family: sans-serif;
        }
    </style>
</head>

<body>
    <h3>HTML onClick Event Attribute</h3>

    <!-- onclick event call here -->

    <p id="geeks" onclick="onclick_event()">
        Click Here
    </p>
    <script>

        /* If onclick event call then
           this script will run */

        function onclick_event() {
            document.getElementById("geeks").innerHTML =
                "Welcome to GeeksforGeeks!";
        }
    </script>
</body>

</html>

Output:

HTML-onclick-2
HTML onclick Event Attribute Example Output

The onclick event attribute is a powerful tool for adding interactivity to web pages. By attaching scripts to click events on various elements, developers can create dynamic and responsive user interfaces that enhance the user experience.


P

PERIYANAYAKI
Improve
Article Tags :

Explore

Lightbox