Opening a link or redirecting a user to a new page on our website using a button on click event is possible with JavaScript.
Often we use <a> tag to redirect users on a new page or to open a new link. However, on some special occasions, we have to redirect the user on the button click event using JavaScript.
Index
How to Open a New HTML Page On Button Click in JavaScript
There are few methods to redirect or to open a new HTML page or link on button click event using JavaScript.
Method 1: Using Window.open()
This method is a straightforward approach to redirect the user to a new page.
<html>
<head>
<title>Open new HTML page or Redirect page using window.open()</title>
</head>
<body>
<p>Redirect in same page</p>
<button onclick="window.open('https://errorsea.com','_self');">click me</button>
<p>Open in new page</p>
<button onclick="window.open('https://errorsea.com','_blank');">click me</button>
</body>
</html>Method 2: Using JavaScript
This method is quite a unique way to redirect users. This method redirects users and leaves the same expression as the user opens a link via <a> tag on the web-page.
<html>
<head>
<title>Redirect or Open new Web page using JavaScript</title>
</head>
<body>
<button onclick="openTab('https://errorsea.com')">Try it</button>
<script>
function openTab(url) {
const link = document.createElement('a');
link.href = url;
link.target = '_blank';
document.body.appendChild(link);
link.click();
link.remove();
}
</script>
</body>
</html>
Read Also: How to Disable TextBox/Input Field Onclick Using JavaScript
Conclusion
Here, we learnt how to open a new HTML web page on button click using JavaScript. However, we can use the same code to redirect the user from one page to another. In addition, Redirecting users is an essential factor in maintaining the bounce rate and SEO. I hope you understand the complete methodology of redirection users on button click using JavaScript.
Happy Scripting 🙂
