Skip to content

JavaScript onclick Event

Why onclick ?

The JavaScript onclick property occurs when the user clicks on an item.

HTML Attribute<element onclick = “handler(event)“>
Event Propertyobject.onclick = handler;
attachEvent Methodobject.attachEvent(“onclick“, handler)
addEventListener Methodobject.addEventListener(“click“, handler, useCapture)

JavaScript onclick Examples

Example 1

onclick example 1
<body>

    <button onclick="clickFunction()">Click Me</button>

    <script>

        function clickFunction() {
            alert("The onclick property worked successfully.")
        }

    </script>
</body>

Example 2

onclick example 2
<body>

    <button id="but">Click Me</button>

    <script>

        document.getElementById("but").onclick = function () {
            clickFunction();
        }

        function clickFunction() {
            alert("The onclick property worked successfully.")
        }

    </script>
</body>

Example 3

onclick example 3
<body>

    <button id="but">Click Me</button>

    <script>

        document.getElementById("but").addEventListener("click", clickFunction)

        function clickFunction() {
            alert("The onclick property worked successfully.")
        }

    </script>
</body>

Example 4

onclick example 4
<body>

    <button id="but">Click Me</button>

    <script>

        document.getElementById("but").onclick = function(){
            alert("The onclick property worked successfully.")
        }

    </script>
</body>

Example 5

onclick example 5
<body id="win">

    <button id="red">RED</button>
    <button id="blue">BLUE</button>
    <button id="green">GREEN</button>
    <button id="orange">ORANGE</button>
    <button id="yellow">YELLOW</button>

    <script>

        document.getElementById("red").onclick = function () {
            document.getElementById("win").style.background = "red"
        }
        document.getElementById("blue").onclick = function () {
            document.getElementById("win").style.background = "blue"
        }
        document.getElementById("green").onclick = function () {
            document.getElementById("win").style.background = "green"
        }
        document.getElementById("orange").onclick = function () {
            document.getElementById("win").style.background = "orange"
        }
        document.getElementById("yellow").onclick = function () {
            document.getElementById("win").style.background = "yellow"
        }

    </script>
</body>

Example 6

<body>

    <div id="box"></div>
    <button id="left">LEFT</button>
    <button id="right">RIGHT</button>
    <button id="up">UP</button>
    <button id="down">DOWN</button>

    <script>

        let left = document.getElementById("left"),
            right = document.getElementById("right"),
            up = document.getElementById("up"),
            down = document.getElementById("down"),
            box = document.getElementById("box");

        left.onclick = function () {
            box.style.transform = "translateX(-80px)"
        }
        right.onclick = function () {
            box.style.transform = "translateX(80px)"
        }
        up.onclick = function () {
            box.style.transform = "translateY(80px)"
        }
        down.onclick = function () {
            box.style.transform = "translateY(-80px)"
        }

    </script>
</body>

Example 7

onclick example 7
<body>

    <h2 id="txt">JAVASCRIPT</h2>
    <button onclick="family1()">1</button>
    <button onclick="family2()">2</button>
    <button onclick="family3()">3</button>
    <button onclick="family4()">4</button>
    <button onclick="family5()">5</button>

    <script>
        
        let txt = document.getElementById("txt");

        function family1() {
            txt.style.fontFamily = "arial"
        }
        function family2() {
            txt.style.fontFamily = "Verdana"
        }
        function family3() {
            txt.style.fontFamily = "Andalus"
        }
        function family4() {
            txt.style.fontFamily = "AR CENA"
        }
        function family5() {
            txt.style.fontFamily = "Broadway"
        }

    </script>
</body>

Example 8

onclick example 8
<div id="container">
        <div id="bot-container" onclick="show();">

            <div id="text">JS</div>
                <div class="loader a1"></div>
                <div class="loader a2"></div>
                <div class="loader a3"></div>
                <div class="loader a4"></div>
        </div>
    </div>
<script>
  var screen = false;

        function show() {
            screen = !screen;
            document.getElementById("bot-container").style.backgroundColor = screen ? "#aa9600" : "transparent";
        }
</script>

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: