How to call JavaScript function instead of href in HTML

Defining a function-trigger with an anchor tag

Typically, an anchor tag leads to a new URL. However, it's possible to transform this functionality into a trigger for JavaScript execution.

The no-go link

To prevent navigation, use href="#" in conjunction with event.preventDefault():

<a href="#" onclick="event.preventDefault(); performAwesomeStuff();">Do amazing things</a>


Dodging to javascript pseudo-protocol

You can also 'do-si-do' the link action this way:

<a href="javascript:void(0);" onclick="performAwesomeStuff();">Click and see!</a>


Coding in disguise

For best interaction experiences, ensure your function-invoking anchor keeps the costume of a traditional link:

a.function-anchor {
  cursor: pointer;
  color: #0645AD;
  text-decoration: underline;
}
a.function-anchor:hover {
  color: #0B0080;
}


<a href="#" onclick="event.preventDefault(); performAwesomeStuff();" class="function-anchor">Do amazing things</a>


Turns your anchor from Clark Kent into Superman...but with better glasses 👓.

Broadening horizons: Alternative approaches

The silent efficiency of unobtrusive JavaScript

For clean HTML, the JavaScript event listener is your best bet:

document.getElementById('myLink').addEventListener('click', function(event){
    event.preventDefault();
    yourFunction();
});


Because nobody likes messy spaghetti code, right? 🍝

Context matters

If a function is what you're aiming to trigger, then sometimes a <button> feels more at home than an <a>:

<button type="button" onclick="yourFunction();">Summon Magic</button>


And just like Ruby Slippers, you can style it to look like a link if need be.

SEO & Accessibility perspective

For our visually impaired friends

Ensure your links are understandable by screen readers and similar assistive tools:

<a href="#" onclick="event.preventDefault(); performAwesomeStuff();" aria-label="Perform magic">Do magical things</a>


Because everyone deserves a magical experience 🧚‍♂️.

SEO considerations

Keep in mind that these JavaScript "links" are as visible to search engines as ninja are in the dark. So, use regular <a href="..."> for crawler-friendly navigation.

Maintenance, performance, and best practices

Cleaner room, cleaner mind - Cleaner code, cleaner project

Use external JavaScript files for attaching event handlers to keep your HTML focused on structure and your JavaScript on functionality.

document.getElementById('myLink').addEventListener('click', myHandler);


<a href="#" id="myLink">Call myFunction</a>


Nice, clean, and minimalist. Just like a zen garden 🌾.

Proactive Approach to Potential Injections

Always implement safeguards against Cross-Site Scripting (XSS) attacks by validating and encoding any user input before it is returned to the client page or used within your DOM.

Because it's better safe than sorry, right?