Loading previous page using html button using JavaScript


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>





Recent Posts:
Hello there!,

You are using AdBlocker!

I am an independent developer trying to help fellow developers and students to resolve issues faced on a day-to-day basis, we 'Code to Care' . There is a lot of expenses involved in hosting and managing a website that's the reason we have ads.

A humble request to you to disable adBlocker on Code2care.org and support us pay our bills.

Thanks,
Cod2ecare - Line's of code for change.

To see contents reload page after unblocking
Code2care is an initiative to publish and share varied knowledge in programming and technical areas gathered during day-to-day learnings and development activities.

Students and Software Developers can leverage this portal to find solutions to their various queries without re-inventing the wheel by referring to our easy to understand posts. Technical posts might include Learnings, Video Tutorials, Code Snippets, How Tos, Blogs, Articles, etc.