HTML DOM click() method

HTML Web Development Front End Technology

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";
}

AmitDiwan

Updated on 07-Aug-2019 13:14:24

Previous Page Print Page Next Page