Clicking Links With JavaScript

A user's tap or mouse click is not always necessary to click a link. A click can be accomplished with JavaScript, too.

There are any number of reasons why JavaScript might be used for clicking. Here are examples.

• Responding to another user action.

• Using the link as an automatic redirector.

• Delay loading the next page upon a normal click or tap on a link.

The essence of the functionality is (1) a link with an id value and (2) JavaScript to click it.

1. Example "link with an id value":

   <a id="my-link-element" href="https://example.com/"></a>
   

2. The JavaScript to click it:

   document.getElementById("my-link-element").click();
   

Below is an example. Three seconds after tapping the div, the browser will load a new page. But first, it will spawn an alert box with a message.

Most of the rest of this article is devoted to the JavaScript click() function in various ways. How to implement the above example will be last — it incorporates functionality I want to present first.

On Page Load Redirect After Delay

Whan a page loads, a countdown begins. When the countdown completes, a link is clicked.

The delay in this example is 5 seconds.

Implementation has two parts.

1. The HTML link.

2. The JavaScript.

Here is the link source code. (Every implementation example has this same link source code.)

<a id="my-link-element" href="https://example.com/"></a>

The link source code's id value my-link-element is referenced in the JavaScript (below).

Notice that the link source code has no link text or image to tap, although something may be provided. Because the link will be clicked with JavaScript, nothing tappable is required.

Here is the JavaScript code.

<script type="text/javascript">
setTimeout(ClickTheLink,5000);
function ClickTheLink() { document.getElementById("my-link-element").click(); }
</script>

When the web page is loaded, the JavaScript immediately sets up a counter for 5 seconds. The counter uses the setTimeout() function. After 5 seconds, function ClickTheLink() is launched.

When launched, function ClickTheLink() clicks the link identified with the my-link-element id value.

The HTML link and the JavaScript optionally may be together in the web page source code. They are separate in these instructions for clarity.

Message and Link Click When Div Is Tapped

When a div is tapped, an alert box with a message is displayed to the page user and then the link is launched.

Implementation has three parts.

1. The HTML link.

2. The div to be tapped.

3. The JavaScript.

Here is the link source code.

<a id="my-link-element" href="https://example.com/"></a>

The link source code's id value my-link-element is referenced in the JavaScript (the code is a bit further down).

Notice that the link source code has no link text or image to tap. The link is invisible.

Instead of tapping the link, the person taps somewhere within a div.

Here is the source code of a div to be tapped.

<div onclick="ClickTheLink()" style="cursor:pointer;">
Tap Me!
</div>

The CSS style cursor:pointer; is required. You may add any other CSS you wish to style the div.

The onclick="ClickTheLink()" is required. When the div is tapped, ClickTheLink() launches the JavaScript. The JavaScript presents the message and clicks the link.

Here is the JavaScript code.

<script type="text/javascript">
function ClickTheLink()
{
   alert("MESSAGE");
   document.getElementById("my-link-element").click();
}
</script>

Replace MESSAGE with your message.

Optionally, the alert("MESSAGE"); command in the above JavaScript source code may be replaced in its entirety with custom JavaScript code to do something else entirely.

When the div is tapped, it launches ClickTheLink(), which displays the MESSAGE and clicks the link identified with the my-link-element id value.

The HTML link, the div to click, and the JavaScript optionally may be together in the web page source code.

Tap Div to Click Link (With Message and Delay)

When a div is tapped, a message is spawned and then, after a 3-second delay, a link is clicked.

Implementation has three parts.

1. The HTML link.

2. The div to be tapped.

3. The JavaScript.

Here is the link source code.

<a id="my-link-element" href="https://example.com/"></a>

The link source code's id value my-link-element is referenced in the JavaScript (the code is a bit further down).

The link source code has no link text or image to tap. The link is invisible.

Instead of tapping the link, the person taps somewhere within a div.

Here is the source code of a div to be tapped (The div contains the same text as the live example further above.)

<div onclick="MessageAndLaunch()" style="cursor:pointer;">
Tap this div for a message then a delayed new page.<br>(Use browser "back" icon to return to this page.)
</div>

The CSS style cursor:pointer; is required. You may add any other CSS you wish to style the div.

The onclick="MessageAndLaunch()" is required. The MessageAndLaunch() call is what launches the JavaScript.

Here is the JavaScript code.

<script type="text/javascript">
function MessageAndLaunch()
{
   alert("New page loads soon after this message is dismissed.");
   setTimeout(ClickTheLink,3000);
}
function ClickTheLink() { document.getElementById("my-link-element").click(); }
</script>

When the div is tapped, it launches MessageAndLaunch(). The JavaScript function spawns a message and sets up a countdown of 3 seconds. When the countdown has completed, the link identified with the my-link-element id value is clicked.

The HTML link, the div to click, and the JavaScript optionally may be together in the web page source code. They are separate in these instructions for clarity.

Uses

The above implementation methods with source code may provide ideas for implementing it in other ways.

With a link that has an id value and JavaScript to click the link, your idea may be an easy implementation.

(This article first appeared with an issue of the Possibilities newsletter.)

Will Bontrager