Friday, 23 May 2014

Illustration of onclick : HTML DOM Mouse Event

The following code shows how to create an alert dialog box and change the text on your main HTML page using a javaScript junction.

/****************************************************************************/


<html>
    <head>
        <title>My First Java Script</title>
    </head>
    <body>
        <button type="button" onClick="MyFunction()">Click me!</button>
        <p id="demo">Hello Lavish Kothari</p>
     
        <script>
            function MyFunction()
            {
                alert("the Text will now be converted");
                document.getElementById("demo").innerHTML="HELLO LAVISH KOTHARI";
            }
        </script>
    </body>
</html>

/****************************************************************************/

<html>
    <body>

        <h1>My First JavaScript</h1>

        <p id="demo">JavaScript can change the style of an HTML element.</p>

        <script>
            function myFunction() {
                var x = document.getElementById("demo");
                x.style.fontSize = "25px";          
                x.style.color = "red";
            }
        </script>

        <button type="button" onclick="myFunction()">Click Me!</button>

    </body>
</html>

/****************************************************************************/
    similarly you can use
   
    onclick : The event occurs when the user clicks on an element
    ondblclick : The event occurs when the user double-clicks on an element
    onmousedown : The event occurs when a user presses a mouse button over an element
    onmousemove : The event occurs when the pointer is moving while it is over an element
    onmouseover : The event occurs when the pointer is moved onto an element
    onmouseout : The event occurs when a user moves the mouse pointer out of an element
    onmouseup : The event occurs when a user releases a mouse button over an element

No comments:

Post a Comment