Ken Ward's Java Script Tutorial ...

Back and Forward Buttons using simple code

This page was one of the first attempts I made to make it easy to update navigation on the site. I wanted each page to reference the previous and next pages in the series. This was OK, but after a while I kept adding pages and changing the order. This meant that lots of pages had to be updated when I wanted to make a change. So my goal was to discover how JavaScript could make updating less tiresome. This page is one of a series attempting to solve this problem: Others in this series are:

1. Back and Forward Using History
2. Back and Forward Buttons (Simple) (This Page)
3. Back and Forward Buttons
4. Back and Forward Buttons 2

This page was only a sampling of what could be done and is where I started. The user could navigate through the tutorial, but I had to change the functions on every page, which soon became tedious. 

Click on the buttons below to get to the previous and to the next page in this tutorial:

The arrows at the top of this page use exactly the same code. The code is activated by the onClick event in the button or in the image code. The onClick calls, respectively, the Back()  and the Forward() function. Here's the simple code in the head of this document:

<script language="JavaScript">
<!--//

/*Code for the going back*/
function Back()
{
document.location="history.htm";
}

/*Code for going forward*/
function Forward()
{
document.location="BackForward.htm";
}
--></script>

Both the buttons and the images use this code to move to the next and previous pages of the tutorial. The next attempt was to enable me to write code so I didn't have to update every page when I made changes to one page.

Ken Ward's HTML Guide...