HREF JavaScript is a method to easily call a JavaScript function when a user clicks on a link on a website. 

If you’ve ever clicked a link and received a pop-up box, such as an alert dialog, then you’ve potentially seen this function in action.

One of the most interesting aspects of JavaScript, as a language, is how it integrates so seamlessly with HTML and CSS. As a JavaScript programmer, you may frequently find yourself interlacing your JavaScript code with your HTML/CSS code.

But using HREF JavaScript is also a bit of a deprecated function — something you should know if you’re brushing up on JavaScript Interview Questions. So, let’s take a look at HREF JavaScript, how it works, and when you might use it.

The Modern Javascript Bootcamp Course (2022)

Last Updated November 2021

  • 483 lectures
  • All Levels
4.7 (8,245)

The most up-to-date JS resource online! Master Javascript by building a beautiful portfolio of projects! | By Colt Steele, Stephen Grider

Explore Course

Calling a JavaScript Function through HREF

Most people are familiar with HTML before they start programming in JavaScript, but not all. Before we understand why we’d use the HREF attribute, we should understand how we use JavaScript in a website.

The “HEAD” area of an HTML page can store JavaScript code. So, your page would look like this:

<HTML>
		<HEAD>
			<SCRIPT>
				...JavaScript code…
			</SCRIPT>
		</HEAD>
		<BODY>
			...Website content…
		</BODY>
	</HTML>

The above is still all HTML code. Anything within the HTML tag is essentially the code of the website page. But though the “HEAD” section stores the code, it’s usually called in the “BODY.” Calling JavaScript code means that you need to know “when” that code is going to be processed — usually based on a user action.

So, you might have:

<button onClick= “javascript:JavaScript_Function()”>

The JavaScript that you wrote would be processed when the user “clicked” the button. The JavaScript_Function() itself would be at the top of the page (“HEAD” section), but the button would be in the middle of the page (“BODY” section).

In fact, an interesting element is that this button would essentially be a worthless element without using JavaScript to process some form of code. Buttons are usually used in HTML forms, but other than form submission, they need JavaScript for more advanced functionality.

In this case, though, we aren’t using buttons. We’re using a hyperlink. A hyperlink is the basic foundation of the internet. You know it as any link that generally shows up as blue and underlined: a connection to another page.

A hyperlink, in HTML, is written as follows:

<a href= “http://www.google.com”>Google Web Search</a>

In the above, the <A> tag is the beginning of the link. The HREF attribute is where the link goes. And then the </A> closes the tag.

But the HREF attribute doesn’t have to include a URL. Far from it. 

In fact, you can create JavaScript code that launches within the HREF attribute of a URL:

<a href=”javascript:JavaScript_Function()”>Click</a>

When you call a JavaScript function through the HREF, it’s similar to onClick JavaScript — the script function processes when you click the link. But you could also use the onHover action to process the JavaScript when the user just puts their cursor on the link, or a variety of other “on mouse move” actions.

Developers often use “A” links in this way because it’s just very easy. It’s an easy way to setup a user-controlled interface — users are used to clicking on links and the developer doesn’t have to scan for any specific action from the user.

Unfortunately, though it’s a pretty easy technique, it’s also considered deprecated.

Code on black screen

Why You Shouldn’t Use HREF JavaScript

You can use HREF JavaScript. On a procedural and computer level, it won’t cause any issues. It will be, essentially, identical to using the onClick function of the link. But it’s extremely deprecated for an important reason.

HREF is meant to act as an identifier — a reference — rather than an action. So, if you use your HREF attribute in this way, you’re using it in a way that goes against the original intent of the attribute. While it works, this makes it “messy” and unintuitive.

In other words, it’s sort of like it’s against the “grammar” of the programming language. It gets the message across, but it does so in a way that’s not generally documented or supported.

Most people will tell you that you should use the following code instead:

<a href= “#” onClick=”javascript:JavaScript_Function()”>

In fact, if you look up HREF JavaScript right now, that’s probably going to be one of the most common examples you see.

But this actually isn’t ideal either. Your HREF shouldn’t be “#” because that causes navigation to the top of the page. Many people don’t realize this because they’re testing their code on a very small page. If your code is only a single page long, “#” isn’t going to do anything at all.

But “#” is actually used to designate positions within a page. For instance, “#tos” might link to your “Terms of Service” header, or “#social” might link to your social media links. When you have a blank “#”, it just assumes you want to go to the top of the page, because it can’t find any other explicit references.

Instead, you should explicitly state, within the HREF, that the HREF reference (the page to navigate to) doesn’t exist:

<A HREF= “javascript:null” onClick=”javascript:JavaScript_Function()”>

So, you’re actually using JavaScript in two places, now! You’re using it in the HREF, but also in the onClick function.

The above is a better example of programming. It tells the link that the “HREF” tag is completely null and that it should not do anything. It also tells the A tag that onClick it should run the JavaScript function.

In programming, there’s a lot that’s assumed. This is especially true for markup languages (HTML, CSS) and web-based languages (JavaScript) which don’t have a compiler, but an interpreter. In general, the more that is explicitly stated, the better. When you aren’t explicit in your statements, it’s more likely you’ll lead to complications or erratic behavior on other platforms.

Using a Blank HREF on an A Tag

Another thing that we should note is that having the HREF attribute altogether isn’t strictly necessary. You can create an a link as simply as:

<a>This is a link.</a>

This link would still appear like a link. The “a” component consists of many things, and the URL is only one of them. A tags have an “onClick” action and an “onHover” action, both of which you can use through JavaScript and CSS.

However, this isn’t wise. When you have a blank HREF tag, it usually reloads the page, which can confuse the user. And if you reload the page on a user unexpectedly, it’s always possible that you could lose some of their work.

Luckily, the same methods that worked above will work here. We can use a JavaScript function to return a “false.” Previously, we used “null.” But let’s take a look at another method: HREF JavaScript void 0.

<A HREF=”javascript:void(0)”>

This explicitly tells the website that it shouldn’t do anything. By using this script A HREF JavaScript, you eliminate the chances that you might just refresh the page with the HREF attribute blank.

Other Methods of Calling JavaScript

Of course, you’re not always going to be calling your JavaScript code from a hyperlink.

What are some methods, besides a script A HREF JavaScript, that you could use to call JavaScript code within an HTML page?

As mentioned, you can always use the onClick method:

<A HREF= “javascript:javascript:void(0)” onClick=”javascript:My_Function()”>

There are also other events that JavaScript can use:

It’s important to note that you can use many JavaScript events if you aren’t using in-line HTML but rather placing the JavaScript in the HTML SCRIPT and STYLE locations. 

For instance, you could globally listen for an OnMouseDown event in your HEAD area, like so:

window.AddEventListener(“mousedown”,My_Function());

The Event Listener can listen for many types of events, such as keypresses and scrolling.

JavaScript can also load on specific events, such as when the page initially loads:

OnLoad() {
		...JavaScript code…
	}

Because JavaScript, HTML, and CSS are all procedural, what happens is that the interpreter (browser) goes through the page line by line, starting from the top. 

Why Would You Use HREF JavaScript?

So, we know that HREF JavaScript is deprecated. It’s still an option if you’re developing, testing out your development, or just programming as a hobby. It fully works on a technical level. But it’s not something that you want to make a habit out of. You don’t want to repeatedly use HREF JavaScript as a method of calling functions.

The exception is that you do want to use HREF JavaScript to return null or to return 0 in cases where an A link isn’t actually going anywhere. This is the most proper way to ensure that the browser doesn’t try to reload the page or move to the top of the page with an A link that doesn’t have a proper reference.

If you really want to dig into web development, knowing HTML, CSS, and JavaScript (and how they interact with each other) is essential. You can learn the basics of JavaScript, including how to call functions, in our JavaScript Tutorial.


Frequently Asked Questions:

What is HREF in JavaScript?

In JavaScript, you can call a function or snippet of JavaScript code through the HREF tag of a link. This can be useful because it means that the given JavaScript code is going to automatically run for someone clicking on the link. HREF refers to the “HREF” attribute within an A LINK tag (hyperlink in HTML).

Can you use JavaScript in HREF? 

In an A tag, you can call JavaScript through the HREF portion of the tag. You could also call JavaScript through an onClick function, onHover function, or other A link attributes. Alternatively, you could use JQuery. Using JavaScript in HREF attributes is easy, but it’s generally considered a deprecated strategy.

What happens if HREF is empty?

If a HREF attribute in an A link is empty, the A tag will usually reload the page. This can be an issue because a page reload could lose user data. There are alternatives. Using a # sign instead of a link will redirect the user to the top of the page. Other options are OnClick functions or JQuery event functions. 

Page Last Updated: November 2021

Top courses in JavaScript

The Complete JavaScript Course 2022: From Zero to Expert!
Jonas Schmedtmann
4.7 (120,164)
Bestseller
Modern JavaScript (Complete guide, from Novice to Ninja)
The Net Ninja (Shaun Pelling)
4.8 (7,686)
Highest Rated
JavaScript: The Advanced Concepts (2022 Update)
Andrei Neagoie, Zero To Mastery
4.7 (9,596)
The Modern Javascript Bootcamp Course (2022)
Colt Steele, Stephen Grider
4.7 (8,245)
JavaScript Web Projects: 20 Projects to Build Your Portfolio
Andrei Neagoie, Jacinto Wong, Zero To Mastery
4.7 (2,229)
50 Projects In 50 Days - HTML, CSS & JavaScript
Brad Traversy, Florin Pop
4.7 (5,963)
Accelerated ES6 JavaScript Training
Maximilian Schwarzmüller
4.7 (5,016)

More JavaScript Courses

JavaScript students also learn

Empower your team. Lead the industry.

Get a subscription to a library of online courses and digital learning tools for your organization with Udemy for Business.

Request a demo