Link href javascript this

Get Set Remove HREF In Javascript (Simple Examples)

Welcome to a quick tutorial on how to get, set, and remove the href property in Javascript. By now, you should know href very well. That “thing” we use to specify which webpage to link to. But how can we dynamically change or remove it using Javascript? For a quick answer:

• To get the href – var link = document.getElementById(«ID»).href;
• To set the href – document.getElementById(«ID»).href = «http://site.com»;
• Alternatively, to set the href to run a Javascript function – document.getElementById(«ID»).href = «javascript:FUNCTION()»;
• To remove the href – document.getElementById(«ID»).removeAttribute(«href»);

That covers the quick basics, but read on for more examples!

TLDR – QUICK SLIDES

TABLE OF CONTENTS

JAVASCRIPT HREF

All right, let us just now get into the mechanics of href, and a few ways we can work with it in Javascript.

1) GET, CHANGE, REMOVE HREF

1A) GET HREF

Yes, it’s as simple as that. We can get the current href with ELEMENT.href .

1B) SET HREF TO URL

To set or change the href of a link, simply assign a new one – ELEMENT.href = «http://site.com» .

1C) SET HREF TO JAVASCRIPT FUNCTION

   function foo () < alert("Foo!"); >function hrefsetjs ()

We can also set the href to run a Javascript function. But I am personally not a fan of this… Will explain more below.

1D) REMOVE HREF

• Setting an empty href – ELEMENT.href = «»
• Or removing it entirely – ELEMENT.removeAttribute(«href»)

• An empty href is equivalent to pointing to the current page itself href=»#» .
• But entirely removing the href will result in a “do nothing when clicked” link.

2) ONCLICK & JAVASCRIPT HREF

As you already know, we can use href=»javascript:FUNCTION()» to run a Javascript function. But take note that we can also attach onclick=»FUNCTION()» to do the same. What happens if we do both onclick and href=»javascript:» together? As the above example turns out, dummyB() will run first, followed by dummyA() .

But personally, I am not a fan of using href=»javascript:» . It is actually a mechanism from the past, and it is plain confusing. Just stick with onclick . If you need to run multiple functions on click, then just do onclick=»FUNCTION(); FUNCTION();» . There’s really no need to do any of the funky javascript:FUNCTION() stuff.

3) ONCLICK & URL LINK TOGETHER

Lastly, let us try out another “funky combination” – We have a href=»URL» link and an onclick attached. So what happens here is, the onclick will run first before opening the URL link. At least on Google Chrome.

DOWNLOAD & NOTES

Here is the download link to the example code, so you don’t have to copy-paste everything.

SUPPORT

600+ free tutorials & projects on Code Boxx and still growing. I insist on not turning Code Boxx into a «paid scripts and courses» business, so every little bit of support helps.

EXAMPLE CODE DOWNLOAD

Click here for the source code on GitHub gist, just click on “download zip” or do a git clone. I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

EXTRA BITS & LINKS

That’s all for this guide, and here is a small section on some extras and links that may be useful to you.

EXTRA) JAVASCRIPT VOID!?

In some tutorials, you may spot something like this:

Basically, this means “do nothing on click”. But be warned – This is a blast from the past, and don’t do this anymore. In modern-day HTML and Javascript, we simply remove the href attribute.

INFOGRAPHIC CHEAT SHEET

LINKS & REFERENCES

THE END

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Leave a Comment Cancel Reply

Search

Breakthrough Javascript

Take pictures with the webcam, voice commands, video calls, GPS, NFC. Yes, all possible with Javascript — Check out Breakthrough Javascript!

Socials

About Me

W.S. Toh is a senior web developer and SEO practitioner with over 20 years of experience. Graduated from the University of London. When not secretly being an evil tech ninja, he enjoys photography and working on DIY projects.

Code Boxx participates in the eBay Partner Network, an affiliate program designed for sites to earn commission fees by linking to ebay.com. We also participate in affiliate programs with Bluehost, ShareASale, Clickbank, and other sites. We are compensated for referring traffic.

Источник