3 Ways To Redirect On Click In Javascript (Simple Examples)

Welcome to a quick tutorial on how to redirect on click in Javascript. Need to redirect the user after they click on a button, or after they have submitted a form?

There are 3 possible ways to redirect on click in Javascript:

<button onclick="location.href='URL'"> Redirect </button>
<button onclick="location.assign('URL')"> Redirect </button>;
<button onclick="location.replace('URL')"> Redirect </button>

While all these seem to do the same thing, they are actually slightly different. Read on for more examples and the differences!

TLDR – QUICK SLIDES

Fullscreen Mode – Click Here

ON CLICK REDIRECTION

All right, let us now get into more examples of how to do a webpage redirection in Javascript.

1) LOCATION HREF & LOCATION ASSIGN

1a-location-href.html

<input type="button" value="HREF" onclick="location.href='1b-location-href.html'">
<input type="button" value="ASSIGN" onclick="location.assign('1b-location-href.html')">

1b-location-href.html

<h1>Redirected!</h1>
<p>You can hit "back" to go back to 1a-location-href.html.</p>

As in the introduction above, there are 3 main ways to change the URL. First, we have location.href and location.assign(). Yes, take note:

location.href is a property. We can retrieve the current URL from location.href, and assign a new URL to change the current page – location.href = URL.
location.assign() is a function. We call this function to change the current page – location.assign(URL).

2) LOCATION REPLACE

2a-location-replace.html

<input type="button" value="REPLACE" onclick="location.replace('2b-location-replace.html')">

2b-location-replace.html

<h1>Redirected!</h1>
<p>2a-location-replace.html is not in the navigation history.</p>

Next, we have location.replace(). While this also does a redirection, take note of the difference here:

location.href and location.assign() – Both will record the current page into the navigation history before redirecting. For example, we do a location.assign("PAGE-B.HTML") on PAGE-A.HTML. The user can hit “back” and go back to PAGE-A.HTML.
location.replace() – Replaces the current URL. For example, we do a location.replace("PAGE-B.HTML") on PAGE-A.HTML. In the navigation history, PAGE-A.HTML is replaced with PAGE-B.HTML.

Long story short –

Use location.href and location.assign() if you allow the user to go back.
Use location.replace() if you don’t want the user to go back.

3) REDIRECT IN THE SAME PAGE – SCROLL TO BOOKMARK

3-bookmark.html

<script>
function goToBookmark () {
  location.hash = "bookmark";
  document.getElementById("bookmark").scrollIntoView();
}
</script>

<span onclick="goToBookmark()">Go to bookmark</span>
<div style="height: 2000px"></div>
<span id="bookmark">The Bookmark.</span>
<div style="height: 2000px"></div>

A quick recap on the “normal HTML way” to create an internal bookmark:

Give the element an ID. For example, <p id="target">Foo</p>.
Point the anchor link to the bookmark. For example, <a href="#target">Go To Foo</a>.

In Javascript, we can access the bookmark portion of the URL with location.hash. But here’s the problem – If we just set location.hash = "BOOKMARK", that will not trigger a “scroll to element”. This is why we need to manually do an ELEMENT.scrollIntoView().

DOWNLOAD & NOTES

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

SORRY FOR THE ADS...

But someone has to pay the bills, and sponsors are paying for it. I insist on not turning Code Boxx into a "paid scripts" business, and I don't "block people with Adblock". Every little bit of support helps.

Buy Me A Coffee Code Boxx eBooks

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) LOCATION OR WINDOW.LOCATION?

console.log(location);
console.log(window.location);
console.log(window.location === location); // true

In some other tutorials, you will see people using window.location instead of location. Is there a difference? Apparently, the answer is no. location and window.location refers to the same thing. So go ahead and be a lazy code ninja. It is safe to use location and drop that windows part.

EXTRA) WINDOW.NAVIGATE!?

If you have been poking around the Internet, you may have also spotted some tutorials using window.navigate() to redirect the page. Take extra note that window.navigate() is an ancient Internet ~~Exploder~~ Explorer thing. It is not supported in most modern browsers – Don’t use this anymore.

LINKS & REFERENCES

Location – MDN
History – MDN
Redirect based on bookmark link – StackOverflow
Javascript Redirect With Parameters – Code Boxx

INFOGRAPHIC CHEAT SHEET

How To Redirect URL in Javascript (click to enlarge)

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!