Web browsers have a back button that lets you go back to the previous page you just visited. If you want this functionality to be performed using a button in HTML you need to make use of history.back() function available in window object.
To demonstrate, let's create a HTML page with a button and call getPrevPage() function onClick of it. Create a function in head section script block.
<!DOCTYPE html>
<html>
<head>
<script>
function getPrevPage() {
//gets to the previous loaded page
window.history.back();
}
</script>
</head>
<body>
<input type="button" value="Back" onclick="getPrevPage()">
</body>
</html>
Similarly we have window.history.forward() that works just as the forward button on the web browsers. Lets create an example with both back and forward button implementation.
<!DOCTYPE html>
<html>
<head>
<title>Previous and Next Page button implementation using Javascript</title>
<script>
function getPrevPage() {
//gets to the previous loaded page
window.history.back();
}
function getNextPage() {
//gets to the next loaded page
window.history.forward();
}
</script>
</head>
<body>
<input type="button" value="Load Prev Page" onclick="getPrevPage()">
<input type="button" value="Load Next Page" onclick="getNextPage()">
</body>
</html>
More Posts related to JavaScript,
- How to Run JavaScript on Mac Terminal
- Get Current time in GMT/UTC using JavaScript
- How to yarn reinstall all Packages
- [javaScript] Convert text case to lowercase
- Get Device Screen Width and Height using javaScript
- Fix - npm start: sh: index.js: command not found
- npm WARN saveError ENOENT: no such file or directory, open /mnt/c/package.json
- JavaScript : Get url protocol HTTP, HTTPS, FILE or FTP
- JavaScript: Convert an Image into Base64 String
- JavaScript : Get current page address
- How to get query string in JavaScript HTML location.search
- Create React App using npm command with TypeScript
- JavaScript: Count Words in a String
- Add Animated Scrolling to Html Page Title Script
- How to send email from JavaScript HTML using mailto
- Javascript convert text case from uppercase to lowercase
- Submit html form on dropdown menu value selection or change using javascript
- Send Extra Data with Ajax Get or Post Request
- Fix: SyntaxError: The requested module does not provide an export named default
- Examples: Convert String to int in JavaScript
- 10 ways to Convert String to a Number in JavaScript
- Excel Fix: SECURITY RISK Microsoft has blocked macros from running because the source of this file is untrusted.
- Fix: ReferenceError: require is not defined in ES module scope [Node]
- [JavaScript] Remove all Newlines From String
- How to detect Browser and Operating System Name and Version using JavaScript
More Posts:
- Fix: ReferenceError: require is not defined in ES module scope [Node] - JavaScript
- Fix - JioCinema Something Went Wrong Please Try Again Error 8001 while streaming IPL Cricket Live - HowTos
- Call a Stored Procedure using Java JDBC CallableStatement Example - Java
- Generate Maven Project Dependency Tree using MVN Command - Java
- What Java version is used for Minecraft 1.18 - Java
- Google Colab: How to read file from Google Drive - Google
- Shortcuts: How to Toggle Word Wrap in Visual Studio Code (VS Code) - Shortcuts
- How to Whitelist IP Address on GoDaddy Hosting? - HowTos