Skip to content
Advertisements

JavaScript Events-Click

The biggest goal of JavaScript is to enable us to perform the operations we want when an event occurs on our page. To ensure this, events that may occur on the page are given a name. We can call a javascript function in the face of the desired event and take the necessary actions.


onClick

Clicking the element is the event.

first method:

<button id="eve">CLICK</button>
<div id="result"></div>

    <script>
        var Button = document.getElementById("eve");
        Button.onclick = function () {
            document.getElementById("result").innerHTML = "'onclick' is running successfully."
        }
    </script>

second method:

<button type="button" onclick="eve();">CLICK</button>
<div id="result"></div>

    <script>
        function eve() {
            document.getElementById("result").innerHTML = "'onclick' is running successfully."
        }
    </script>

Example:

<h3>Calculate the length of the text.</h3>
    <input type="text" id="text" />
    <button type="button" onclick="calculate();">calculate</button>
    <div id="result"></div>
    <div id="mes"></div>

    <script>

        function calculate() {
            var txt = document.getElementById("text").value,
                message = document.getElementById("mes").innerHTML = "";
            x = txt.length;
            try{
                if (txt == "") throw "Do not leave empty."
                if (!isNaN(txt)) throw "Do not use numbers"
            } catch (e) {
                mes.innerHTML = e;
            }
            document.getElementById("result").innerHTML = x;
        }

    </script>

onDblClick

Double-clicking the element is an event.

    <div style="width:100px;
            height:100px;
            border: solid 1px Black;
            text-align:center;
            background-color:#ffffff;"
            onDblClick="color()"
            id="box"></div>

    <script>

        var variable = 0;
        function color() {
            var boxColor = document.getElementById("box");
            switch (variable) {
                case 0: boxColor.style.background = "#e04040";//red
                        variable++;
                        break;
                case 1: boxColor.style.background = "#40d040";//blue
                        variable++;
                        break;
                case 2: boxColor.style.background = "#4080f0";//white
                        variable++;
                        break;
                default: boxColor.style.background = "#ffffff";//white
                         variable = 0;
                         break;
            }
        }

    </script>
Advertisements

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: