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!

ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

TLDR – QUICK SLIDES

Fullscreen Mode – Click Here

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

QUICK NOTES

If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

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().

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!