Hello Again CodeNewbies
Today we will be creating redirect button using HTML & JavaScript
HTML and JavaScript Example
- Add a button to your HTML file.
- Use JavaScript to handle the button click event and perform the redirection.
Here's how you can do it step-by-step:
Step 1: Add a Button in HTML
First, add a button to your HTML file. For example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Redirect Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Button to trigger the redirection -->
<button id="redirectButton">Click me to go to another page</button>
<script src="script.js"></script>
</body>
</html>
Step 2: Add JavaScript to Handle the Button Click
Next, add the following JavaScript to your
script.js
file to handle the button click and redirect the user:
document.addEventListener('DOMContentLoaded', function() {
// Select the button by its ID
const redirectButton = document.getElementById('redirectButton');
// Add a click event listener to the button
redirectButton.addEventListener('click', function() {
// Redirect the user to the specified URL
window.location.href = 'https://www.example.com';
});
});
Detailed Explanation
HTML Button:
<button id="redirectButton">Click me to go to another page</button>
This creates a button with the ID redirectButton. When this button is clicked, it will trigger the JavaScript event listener.
- JavaScript:
document.addEventListener('DOMContentLoaded', function() {
const redirectButton = document.getElementById('redirectButton');
redirectButton.addEventListener('click', function() {
window.location.href = 'https://www.example.com';
});
});
document.addEventListener('DOMContentLoaded', function() { ... });
ensures that the JavaScript code runs only after the DOM has fully loaded.
const redirectButton = document.getElementById('redirectButton');
selects the button element by its ID.
redirectButton.addEventListener('click', function() { ... });
adds a click event listener to the button.
window.location.href = 'https://www.example.com';
changes the current page to the specified URL
(https://www.example.com).
& with that you have a button which redirects your users to any desired url, of your choice...
Top comments (1)
Nice and clear explanation! This is super helpful for beginners who want to understand how a simple redirect works using HTML and JavaScript. It’s a small feature, but very powerful—especially for things like call-to-action buttons on landing pages or guiding users to important resources. For anyone building a business website, even something like a redirect button can improve user flow and engagement, which is crucial in competitive markets like the UAE, where online presence plays a big role in business success.