Skip to content
Advertisements

JavaScript ondblclick Event

Why ondblclick ?

The JavaScript ondblclick property is mounted on the onclick property. The onclick feature works only once. The ondblclick feature works twice after being clicked repeatedly.

Syntax:

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

ondblclick Examples

Example 1

ondblclick example 1
<body>

    <button ondblclick="dblFunction()">CLICK</button>

    <script>

        function dblFunction() {
            alert("The ondblclick property worked successfully.")
        }

    </script>
</body>

Example 2

ondblclick example 2
<body>

    <button ondblclick="dblFunction()">CLICK</button>

    <script>

        document.getElementById("but").ondblclick = function () {
            dblFunction();
        }

        function dblFunction() {
            alert("The ondblclick property worked successfully.")
        }
    </script>
</body>

Example 3

ondblclick example 3
<body>

    <button id="but">CLICK</button>

    <script>

        document.getElementById("but").addEventListener("dblclick", dblFunction)

        function dblFunction() {
            alert("The ondblclick property worked successfully.")
        }
    </script>
</body>

Example 4

ondblclick example 4
<body>

    <button id="but">CLICK</button>

    <script>

        document.getElementById("but").ondblclick =  function(){
            alert("The ondblclick property worked successfully.")
        }
    </script>
</body>

Example 5

ondblclick 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").ondblclick = function () {
            document.getElementById("win").style.background = "red"
        }
        document.getElementById("blue").ondblclick = function () {
            document.getElementById("win").style.background = "blue"
        }
        document.getElementById("green").ondblclick = function () {
            document.getElementById("win").style.background = "green"
        }
        document.getElementById("orange").ondblclick = function () {
            document.getElementById("win").style.background = "orange"
        }
        document.getElementById("yellow").ondblclick = function () {
            document.getElementById("win").style.background = "yellow"
        }

    </script>
</body>

Example 6

ondblclick 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.ondblclick = function () {
            box.style.transform = "translateX(-80px)"
        }
        right.ondblclick = function () {
            box.style.transform = "translateX(80px)"
        }
        up.ondblclick = function () {
            box.style.transform = "translateY(80px)"
        }
        down.ondblclick = function () {
            box.style.transform = "translateY(-80px)"
        }

    </script>
</body>

Example 7

ondblclick example 7
<body>

    <h2 id="txt">JAVASCRIPT</h2>
    <button ondblclick="family1()">1</button>
    <button ondblclick="family2()">2</button>
    <button ondblclick="family3()">3</button>
    <button ondblclick="family4()">4</button>
    <button ondblclick="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>
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: