HTML - DOM Element click() Method

Quiz

The HTML DOM Element click() method is used to simulate (i.e., recreate the conditions or actions of something) a mouse click on an element programmatically, allowing it to act as if it was clicked by a user.

When this method is applied to a specific element, and when the user clicks on that element, this event is triggered to perform the specified operation.

Syntax

Following is the syntax of the HTML DOM Element click() method −

element.click();

Parameters

This method does not accept any parameter.

Return Value

This method does not return any value.

Example 1: Simulate Click on a Button

The following is a basic example of the HTML DOM Element click() method −

<!DOCTYPE html>
<html lang="en">
<head> 
<title>HTML DOM Element click()</title>
</head>
<body>
<h3>HTML DOM Element click() Method</h3>
<p>Click the button "Simulate" to trigger it programmatically..</p>
<button id="bt" onclick="alert('Button clicked!')">Click me</button>    
<button onclick="simulateButtonClick()">Simulate Button Click</button>
<script>
   function simulateButtonClick() { 
      var button = document.getElementById("bt");   
      button.click();
      // Display a message to confirm the click
      alert("Button clicked programmatically!");
   }
</script>
</body>
</html>

When the button clicks, it alerts a message at the top of the web page.

Example 2: Simulate Click on a Link

Here is another example of the HTML DOM Element click() method. We use this method to simulate a click on a link −

<!DOCTYPE html>
<html lang="en">
<head> 
<title>HTML DOM Element click()</title>
</head>
<body>
<h3>HTML DOM Element click() Method</h3>
<p>Click the button to simulate clicking on the link:</p>
<a href="https://www.tutorialspoint.com/index.htm" id="myLink">Click Me</a>
<button id="clickButton">Simulate Click</button> 
<script>
   document.addEventListener('DOMContentLoaded', ()=>{
      var link = document.getElementById('myLink');
      var clickButton = document.getElementById('clickButton');    
      // Simulate link click when button is clicked
      clickButton.addEventListener('click', ()=>{
         link.click();
      });
   });
</script>
</body>
</html>

The above program simulates a click on a link when the link or button is clicked.

Example 3: Simulate Checkbox Click

In the example below, we use the click() method to simulate a click on a checkbox −

<!DOCTYPE html>
<html lang="en">
<head> 
<title>HTML DOM Element click()</title>
</head>
<body>
<h3>HTML DOM Element click() Method</h2>
<p>Click the checkbox or "Toggle Checkbox" button to see the changes.</p>
<input type="checkbox" id="my" onclick="checkbox">Checkbox
<br><br>
<button onclick="toggleCheckbox()">Toggle Checkbox</button>
<script> 
   function toggleCheckbox() { 
      var checkbox = document.getElementById("my");
      // Simulate a click on the checkbox
      checkbox.click();     
   }
</script>
</body>
</html>

When the checkbox is checked it simulates a click on a checkbox.

Supported Browsers

Method
click()	Yes	Yes	Yes	Yes	Yes

html_dom.htm

Print Page