To initiate a click on a link present on a web page, it is essential to invoke a user action associated with the click event. However, what if our goal is to simulate a click on a link programmatically through JavaScript, without relying on a user interaction or any other external event?
We could accomplish this using JavaScript.
There may be multiple reasons why users want to click a link. Following are some scenarios where we require to click a link programmatically.
- Responding to another user's action or event
- To create an automatic redirector using the link
- Delay loading the next page upon a normal click or tap on a link
- To download the server response in some Excel or CSV file
There could be numerous additional motivations for executing link clicks through JavaScript.
The rationale for this feature is that we will retrieve the element utilizing one of the DOM selection methods and then invoke the click function on it.
Consider the below example:
<a id="my-ele" href="https://logic-practice.com/"></a>
The script will be structured as outlined below to activate the click functionality:
document.getElementById("my-ele").click();
Let's understand its different scenarios:
On Page Load Redirect After Delay
There may be instances where it is necessary to redirect a user to a different page during the loading of the current page. In such scenarios, the previously mentioned method will prove to be useful. In this case, we will initiate a redirection to another page at the moment the current page begins to load. A countdown timer will start as soon as the page loads, and once this countdown reaches zero, a specified link will be automatically activated.
Below is the implementation of this:
Example:
In the following illustration, we are implementing a countdown timer that lasts for 1 second.
Let's consider the below HTML code:
<a id="my-ele" href="https://logic-practice.com/"></a>
We will retrieve the aforementioned element by utilizing the getElementById method. In this particular example, there is no text present, which means it will remain invisible to the end user. The link will be activated through JavaScript; hence, there will be no requirement for any user interaction.
Below is the JavaScript code for this:
< Script type="text/javascript">
setTimeout(redirectTo,1000);
function redirectTo()
{ document.getElementById("my-ele").click();
}
</script>
The complete code of the above example is:
<body>
<a id="my-ele" href="https://logic-practice.com/"></a>
<script>
setTimeout(redirectTo,1000);
function redirectTo() {
alert("redirect");
document.getElementById("my-ele").click() ;
}
</script>
</body>
In the preceding example, upon the loading of the page, the initial Script is executed, which contains the setTimeout function. This function is designed to invoke the redirect function after a delay of one second. Consequently, it will navigate the user to a different webpage.
Upon the invocation of the redirectTo function, it will specifically identify the anchor tag using its id and subsequently execute the click method.
Display a message and click on a link in JavaScript
Let’s examine an additional scenario where it is necessary to display a message to users triggered by a particular user action and subsequently redirect them to a different page.
For instance, when a user successfully completes a booking for any product, it is essential to redirect them to a different page. There could be various situations that necessitate the implementation of this feature. Let’s clarify this concept with a straightforward example.
For instance, consider a div element where we intend to show a notification to the user before navigating them to a different page.
We will be performing it in the following three parts:
- Creating the HTML link.
- Apply event from the user (I.e., click event on the div)
- JavaScript for the click event and redirection
Below is the code for the link:
<a id="my-ele" href="https://logic-practice.com/"></a>
In the code provided, we are retrieving the DOM element by its identifier value. Since the aforementioned tag does not contain any text, it remains hidden within the DOM. To address this issue, it is necessary to insert a div element into the DOM.
In the code provided below, there exists a div element that captures user interactions, enabling the user to initiate a specific function through a click event.
<div onclick="redirectTo()" style="cursor:pointer;">
Clik Here</div>
In the code provided, we utilize the cursor-pointer CSS property to modify the cursor's appearance, indicating that a click action is possible. Therefore, when the div element is clicked, it triggers the redirectTo function. Now, let's implement the JavaScript code that will handle displaying a message and redirecting the user to a different webpage.
Below is the JavaScript code.
< Script type="text/javascript">
function redirectTo()
{
alert("You have clicked on div");
document.getElementById("my-ele").click();
}
</script>
Collectively, we can use the below code:
<body>
<a id="my-ele" href="https://logic-practice.com/"></a>
<div onclick="redirectTo()" style="cursor:pointer;">
Clik Here</div>
< Script type="text/javascript">
function redirectTo()
{
alert("You have clicked on div");
document.getElementById("my-ele").click();
}
</script>
</body>
The preceding illustration will present an alert notification stating, "You have clicked on div." Upon pressing the OK button, the user will be directed to the designated link. While the use of alert is not mandatory, there are alternative methods available for displaying the message, such as through a modal dialog or a toast notification, among others.
Summary:
We can programmatically trigger a link click using JavaScript without requiring a user interaction or any other external event. This capability can be beneficial in numerous scenarios, such as reacting to a different user action or event, implementing an automatic redirect through the link, postponing the loading of the subsequent page following a standard click or tap on a link, or facilitating the download of server responses in formats like Excel or CSV. There are certainly many additional situations where this could be applied. JavaScript provides the means to achieve these objectives and similar needs.
We have explored several use cases in this instance. These can assist in conveying the concepts and reasoning applicable to analogous scenarios.
The approach involved utilizing a hyperlink that has an id attribute but lacks visible text, ensuring it remains hidden from the DOM. By retrieving the value associated with its id and executing the click function on it, we can achieve the desired action. There are various alternative methods available to accomplish the same task, such as employing different DOM methods or opting for event listeners to initiate the event. However, leveraging the id attribute provided a straightforward solution for executing the task efficiently.