Go Back to Previous Page
To return to the previous page, follow these steps:
Step 1: First, make an HTML file and link two files together.
Step 2: As the second step, create Linked Page 1 and add a button and JS file.
Step 3: As the third step, create Linked Page 2 and add a button and JS file.
Step 4: Make the button work so that pressing it takes you back to the previous page.
We need to know about addEventListener() and window.history.back() for this functionality addEventListener() Attaches an event handler to the document
removeEventListener():
Removes an event handler from the document (that has been attached with the addEventListener() method)
addEventListener() Syntax:
document.querySelector('button').addEventListener('click',function)addEventListener(‘click’) or onmouseover, onmouseout, onfocus,onblur,click,dblclick
window.history.back():
history.back() method loads the previous URL (page) in the history list.
history.back() is the same as clicking “Back” your browser.
<button onclick="history.back()">Go Back</button>
Syntax:
<button onclick="history.back()">Go Back</button> <button onclick="history.forward()">Go Forward</button> <button onclick="history.go(-2)">Go Back 2 Pages</button>
JavaScript Code:
Step 1: Create a HTML File and Link two files
go back to previous page.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Go back to previous page</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div>
<h1>Home page </h1>
<a href="page1.html">Page 1</a>
<a href="page2.html">Page 2</a>
<p id="btn"></p>
</div>
<script>
let k= window.history.length
document.getElementById("btn").innerHTML=k
document.write("No.of tabs are finded by [ window.history.length ] method :" ,k)
</script>
</body>
</html>Step2 : Create Linked page 1 named page1.html & add onmouseover functionality to a button
page1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Go back to previous page</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div>
<h2>Page 1</h2>
<button onmouseover="window.history.back()" > GoTo Prev Page</button>
<p id="btn"></p>
</div>
<!-- <script src="script.js">
document.getElementById("btn").innerHTML=window.history.length
</script> -->
</body>
</html>Step 3: Create Linked page 2 named page2.html & add a button, added JS file.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Go back to previous page</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div>
<h2>Page 2</h2>
<button> GoTo Prev Page</button>
<p id="btn"></p>
</div>
<script src="script.js">
document.getElementById("btn").innerHTML=window.history.length
</script>
</body>
</html>style.css
body{
text-align: center;
}Script.js
document.querySelector('button').addEventListener('dblclick', () =>{
window.history.back()
})
