JavaScirpt Tutorial Index

JavaScript Tutorial Javascript Example Javascript comment Javascript Variable Javascript Data Types Javascript Operators Javascript If Else Javascript Switch Statement Javascript loop JavaScript Function Javascript Object JavaScript Arrays Javascript String Javascript Date Javascript Math Javascript Number Javascript Dialog Box Javascript Window Object Javascript Document Object Javascript Event Javascript Cookies Javascript getElementByID Javascript Forms Validation Javascript Email Validation Javascript Password Validation Javascript Re-Password Validation Javascript Page Redirect Javascript Print How to Print a Page Using JavaScript Textbox events in JavaScript How to find the largest number contained in a JavaScript Array?

Misc

JavaScript P5.js JavaScript Minify JavaScript redirect URL with parameters Javascript Redirect Button JavaScript Ternary Operator JavaScript radio button checked value JavaScript moment date difference Javascript input maxlength JavaScript focus on input Javascript Find Object In Array JavaScript dropdown onchange JavaScript Console log Multiple variables JavaScript Time Picker Demo JavaScript Image resize before upload Functional Programming in JavaScript JavaScript SetTimeout() JavaScript SetInterval() Callback and Callback Hell in JavaScript Array to String in JavaScript Synchronous and Asynchronous in JavaScript Compare two Arrays in JavaScript Encapsulation in JavaScript File Type Validation while Uploading Using JavaScript or jquery Convert ASCII Code to Character in JavaScript Count Character in string in JavaScript Get First Element of Array in JavaScript How to convert array to set in JavaScript How to get current date and time in JavaScript How to Remove Special Characters from a String in JavaScript Number Validation in JavaScript Remove Substring from String in JavaScript

Interview Questions

JavaScript Interview Questions JavaScript Beautifier Practice Javascript Online Object in JavaScript JavaScript Count HTML Interpreter Getters and Setters in JavaScript Throw New Error in JavaScript XOR in JavaScript Callbacks and Promises in JavaScript Atob in JavaScript Binary in JavaScript Palindrome Number in JavaScript How to Get First Character Of A String In JavaScript How to Get Image Data in JavaScript How to get URL in JavaScript JavaScript GroupBy Methods difference-between-var-let-and-const-keyword-in-java-script

Javascript Redirect Button

What is a redirect button?

When a button acts as a hyperlink, it is known as a redirect button. On clicking the button, it transfers the user to another page.

How to make a redirect button in JavaScript?

There are various ways to create a redirect link in JavaScript, the most common ways are using the following attributes:

  • replace() attribute

It stimulates an HTTP Direct.

Syntax:

window.location.replace("url of the website/document");

Example:

<!DOCTYPE html>
<html>
<head>
    <title>
         Javascript redirect buttons
    </title>
</head>


<body>


<h2>Javascript Redirect Button using replace() </h2>
<p>The following example demonstrates how the replace() method is used to replace the current document with a new one.</p>


<button onclick="myFunctiondemo()">Redirect Button</button>


<script>
function myFunctiondemo() {
  location.replace("https://www.javatpoint.com/")
}
</script>


</body>
</html>

The above code can also be written in a slightly different way:

<!DOCTYPE html>
<html>
<head>
    <title>
         Javascript redirect buttons
    </title>
</head>


<body>
<h2>Javascript Redirect Button using replace() </h2>
<p>The following example demonstrates how the replace() method is used to redirect the current web page to a new one.</p>


<button id="redirect">Redirect Button</button>


<script type="text/javascript">




 document.getElementById("redirect").onclick = function () {
    location.replace("https://www.javatpoint.com/")
};
</script>


</body>
</html>

Output:

Javascript Redirect Button

After clicking the button, the web page is now redirected to the Javatpoint website,

Javascript Redirect Button
  • href attribute:

It stimulates on a mouse click.

Syntax:

window.location.href  = "url of the website/document";

Example:

<!DOCTYPE html>
<html>
<head>
    <title>
         Javascript redirect buttons
    </title>
</head>


<body>
<h2>Javascript Redirect Button using href attribute</h2>
<p>The following example demonstrates how the href() attribute is used to redirect the current web page to a new one.</p>


<button onclick="myFunctiondemo()">Redirect Button</button>


<script>
function myFunctiondemo() {
  location.href = ("https://www.javatpoint.com/";
}
</script>


</body>
</html>

The above code can also be written in a slightly different way:

<!DOCTYPE html>
<html>
<head>
    <title>
         Javascript redirect buttons
    </title>
</head>


<body>
<h2>Javascript Redirect Button using href attribute</h2>
<p>The following example demonstrates how the href() attribute is used to redirect the current web page to a new one.</p>


<button id="redirect">Redirect Button</button>


<script type="text/javascript">




 document.getElementById("redirect").onclick = function () {
  location.href = ("https://www.javatpoint.com/");
};
</script>


</body>
</html>

Output:

Initially, the screen looks like this:

Javascript Redirect Button

After clicking the button, the web page is now redirected to the Javatpoint website,

Javascript Redirect Button

What is the difference between replace() and href?

The major difference between href and replace, is that replace() can remove the URL of the current document or the current website from the history. It means that it is impossible navigate back to the original document, using the "back" button.

NOTE: Tags like the anchor tag <a> can also be used to create redirect buttons. However, no JavaScript is required in it.