Scribd Logo
Upload

Welcome to Scribd!

  • 32 views

    Javascript Events

    Uploaded by

    Bala Sudhakar
    This document discusses JavaScript events and provides examples of using different event handlers like onclick, onmouseover, onload, onfocus, ondblclick etc. to trigger JavaScript functions and modify elements. The examples demonstrate how events can be used to change text, styles, colors and more in response to user actions like clicks, mouseovers etc.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd

    Javascript Events

    Uploaded by

    Bala Sudhakar
    32 views8 pages
    This document discusses JavaScript events and provides examples of using different event handlers like onclick, onmouseover, onload, onfocus, ondblclick etc. to trigger JavaScript functions and modify elements. The examples demonstrate how events can be used to change text, styles, colors and more in response to user actions like clicks, mouseovers etc.

    Original Title

    JAVASCRIPT EVENTS.docx

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    This document discusses JavaScript events and provides examples of using different event handlers like onclick, onmouseover, onload, onfocus, ondblclick etc. to trigger JavaScript functions and modify elements. The examples demonstrate how events can be used to change text, styles, colors and more in response to user actions like clicks, mouseovers etc.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Download as docx, pdf, or txt
    32 views8 pages

    Javascript Events

    Uploaded by

    Bala Sudhakar
    This document discusses JavaScript events and provides examples of using different event handlers like onclick, onmouseover, onload, onfocus, ondblclick etc. to trigger JavaScript functions and modify elements. The examples demonstrate how events can be used to change text, styles, colors and more in response to user actions like clicks, mouseovers etc.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Download as docx, pdf, or txt
    of 8

    JAVASCRIPT EVENTS

    <h1 onclick="this.innerHTML='Ooops!'">Click on this


    text!</h1>

    <h1 onclick="changeText(this)">Click on this text!</h1>

    <script>
    function changeText(id) {
    id.innerHTML = "Ooops!";
    }
    </script>

    <button onclick="displayDate()">The time is?</button>

    <script>
    function displayDate() {
    document.getElementById("demo").innerHTML = Date();
    }
    </script>

    <p id="demo"></p>

    1
    <button id="myBtn">Try it</button>

    <p id="demo"></p>

    <script>
    document.getElementById("myBtn").onclick = displayDate;

    function displayDate() {
    document.getElementById("demo").innerHTML = Date();
    }
    </script>

    <body onload="checkCookies()">

    <p id="demo"></p>

    <script>
    function checkCookies() {
    var text = "";

    2
    if (navigator.cookieEnabled == true) {
    text = "Cookies are enabled.";
    } else {
    text = "Cookies are not enabled.";
    }
    document.getElementById("demo").innerHTML = text;
    }
    </script>

    <script>
    function myFunction() {
    var x = document.getElementById("fname");
    x.value = x.value.toUpperCase();
    }
    </script>
    </head>
    <body>

    Enter your name: <input type="text" id="fname"


    onchange="myFunction()">
    <p>When you leave the input field, a function is triggered which
    transforms the input text to upper case.</p>

    3
    <div onmouseover="mOver(this)" onmouseout="mOut(this)"
    style="background-
    color:#D94A38;width:120px;height:20px;padding:40px;">
    Mouse Over Me</div>

    <script>
    function mOver(obj) {
    obj.innerHTML = "Thank You"
    }

    function mOut(obj) {
    obj.innerHTML = "Mouse Over Me"
    }
    </script>

    <div onmousedown="mDown(this)" onmouseup="mUp(this)"


    style="background-
    color:#D94A38;width:90px;height:20px;padding:40px;">
    Click Me</div>

    4
    <script>
    function mDown(obj) {
    obj.style.backgroundColor = "#1ec5e5";
    obj.innerHTML = "Release Me";
    }

    function mUp(obj) {
    obj.style.backgroundColor="#D94A38";
    obj.innerHTML="Thank You";
    }
    </script>

    <script>
    function myFunction(x) {
    x.style.background = "yellow";
    }
    </script>
    </head>
    <body>

    5
    Enter your name: <input type="text" onfocus="myFunction(this)">

    <p>When the input field gets focus, a function is triggered which


    changes the background-color.</p>

    <body>

    <h1 onmouseover="style.color='red'"
    onmouseout="style.color='black'">
    Mouse over this text</h1>

    </body>

    <script>
    function mymessage() {
    alert("This message was triggered from the onload event");
    }
    </script>
    </head>

    <body onload="mymessage()">
    6
    </body>

    <body>

    <p ondblclick="myFunction()">Double-click this paragraph to trigger a


    function.</p>

    <p id="demo"></p>

    <script>
    function myFunction() {
    document.getElementById("demo").innerHTML = "Hello World";
    }
    </script>

    </body>

    <body>

    <p>This example demonstrates how to assign an "ondblclick" event to a


    p element.</p>

    7
    <p id="demo" ondblclick="myFunction()">Double-click me.</p>

    <script>
    function myFunction() {
    document.getElementById("demo").innerHTML = "I was double-
    clicked!";
    }
    </script>

    </body>

    You might also like