How to Use Methods in Button in JavaScript

    0
    107
    Spread the love
    • 1
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
      1
      Share

    In this post http://www.askqtp.com/2012/11/how-to-create-button-in-web.html I have shown how abutton is created in web page.
    Here I have shown how to work with methods
    https://www.techtravelhub.com/2012/11/how-to-associate-methods-by-using-button.html

    With the current post I am planning to show how to use the methods. Recall the methods.

    Methods:

    Type Methods Details
    Methods blur() It removes the focus from a button
    click() Most commonly used method with button. It calls the event handler function defined by developer
    focus() This is a method triggered when a button gains focus
    handleEvent() This throws an event to correct event handler



    So the methods associate with a button are blur(),click(),focus() and handleEvent().


    <html>
     <head>
     <title> Testing button </title>
     <script language=”javascript”>
    //This is the function  which will be activated on click on the button
    function focusLoss()
    {
     document.form1.button1.blur();
     }
     </script>
     </head>
     <body>
     <form name=”form1″>
    // There is no method defined so after clicking the focus will be there itself.
     <input type=”button” name=”button2″ value=”Click me i am 1″ />
    // This is a method which uses blur() function to loose focus when clicked on a the button
     <input type=”button” name=”button1″ value=”Click me” onClick=’focusLoss()’/>
     </body>
    </html>

    Let us see how the output comes

    Now let us click on the second button…

    <input name=”button1″ onclick=”focusLoss()” type=”button” value=”Click me” />
    Here on clicking the button the focusLoss function is called which again calling blur() method.So on clicking on the button it should remove the focus. Let’s see how it works…


    Here you can do what ever you want to do..

    function focusLoss()
    {
    document.form1.button1.blur();
    document.form1.button2.focus();
     }
     </script>

    Here you are taking focus from second and assign to the first.

    image credit: http://www.dragonartz.net

    Don't miss out!
    Subscribe To Newsletter

    Receive top technical news, lesson ideas, travel tips and more!

    Invalid email address
    Give it a try. You can unsubscribe at any time.

    Spread the love
    • 1
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
      1
      Share

    LEAVE A REPLY

    Please enter your comment!
    Please enter your name here