
- HTML Tutorial
- HTML - Home
- HTML - Overview
- HTML - Basic Tags
- HTML - Elements
- HTML - Attributes
- HTML - Formatting
- HTML - Phrase Tags
- HTML - Meta Tags
- HTML - Comments
- HTML - Images
- HTML - Tables
- HTML - Lists
- HTML - Text Links
- HTML - Image Links
- HTML - Email Links
- HTML - Frames
- HTML - Iframes
- HTML - Blocks
- HTML - Backgrounds
- HTML - Colors
- HTML - Fonts
- HTML - Forms
- HTML - Embed Multimedia
- HTML - Marquees
- HTML - Header
- HTML - Style Sheet
- HTML - Javascript
- HTML - Layouts
- HTML References
- HTML - Tags Reference
- HTML - Attributes Reference
- HTML - Events Reference
- HTML - Fonts Reference
- HTML - ASCII Codes
- ASCII Table Lookup
- HTML - Color Names
- HTML - Entities
- HTML - Fonts Ref
- HTML - Events Ref
- MIME Media Types
- HTML - URL Encoding
- Language ISO Codes
- HTML - Character Encodings
- HTML - Deprecated Tags
HTML DOM click() method
The HTML DOM click() method simulates a mouse-click on an element. It can be used to click on any element just like a user would do. This is used to fire the elements click event. The click event does event bubbling i.e. it will execute the click event of all its parents too.
Syntax
Following is the syntax of HTML DOM click() method −
HTMLElementObject.click()
Example
Let us see an example for the click() method −
<!DOCTYPE html> <html> <body> <p>Hover over the radio button to simulate a mouse-click.</p> <form> <label>Radio <input type="radio" id="myRadio" name="choice" onmouseover="clickFunction()"</label> </form> <p id="Sample"></p> <script> function clickFunction() { document.getElementById("myRadio").click(); document.getElementById("Sample").innerHTML = "Radio button has been clicked on mouse hover"; } </script> </body> </html>
Output
This will produce the following output −
On hovering over the radio button −
We have created a radio button with label inside a form and gave it the “myRadio” id. This button on mouse hover will execute the clickFunction() −
<label>Radio <input type="radio" id="myRadio" name="choice" onmouseover=”clickFunction()"</label>
The clickFunction() using getElementById() method gets the radio button and executes its click() method. This will check the radio button . After checking the radio button a success message is displayed in the paragraph with id “Sample” using its innerHTML property −
function clickFunction() { document.getElementById("myRadio").click(); document.getElementById("Sample").innerHTML = "Radio button has been clicked on mouse hover"; }
- Related Articles
- HTML DOM addEventListener() Method
- HTML DOM normalize( ) Method
- HTML DOM write() Method
- HTML DOM writeln() Method
- HTML DOM insertAdjacentElement( ) Method
- HTML DOM insertAdjacentHTML( ) Method
- HTML DOM insertAdjacentText( ) Method
- HTML DOM insertBefore( ) Method
- HTML DOM isDefaultNamespace( ) Method
- HTML DOM isEqualNode( ) Method
- HTML DOM isSameNode( ) Method
- HTML DOM item( ) Method
- HTML DOM appendChild() Method
- HTML DOM blur() Method
- HTML DOM cloneNode() method
