When JavaScript Needs to Run Before Loading Another Page

When a link is clicked, the browser tends to follow it immediately by taking the browser to the destination URL.

If JavaScript needs to run before the link is followed, the link can have an href value that the browser will ignore. Then, an onclick attribute runs the JavaScript; and after that populates the href attribute with the correct URL.

Here is an example.

<a 
   href="javascript:;" 
   onclick="alert('testing'); this.href='https://example.com/page.php'">
Link text
</a>

The link is coded with javascript:; for the href attribute value. The javascript:; acts like a null value. The browser does nothing with it.

The onclick attribute has two JavaScript statements. The statements are separated with a comma (;);

1. The first JavaScript statement is alert('testing')

   Replace alert('testing') with the JavaScript you want to run. The JavaScript may be a function call.

2. Tne second JavaScript statement is this.href='https://example.com/page.php'

   Replace https://example.com/page.php with the web page URL the browser is supposed to load after the JavaScript runs.

With the above code, the JavaScript runs. Then, the browser loads the page at the URL specified in the onclick attribute.

Will Bontrager