How to Make a Go-Back Input Button with Inline JavaScript

In this lesson, you will learn how to create a “Go Back” button using inline JavaScript. Although modern browsers already have a back button, there are scenarios where adding one to your site might enhance user experience. As a designer, the decision is yours to make.

Step-by-Step Guide

1. HTML Structure: To create a “Go Back” button, we’ll use an input element with the type attribute set to “button”. We’ll label our button and use the onclick attribute to trigger JavaScript code.

• • type="button": Defines the input as a button.
  • value="Go Back From Whence You Came!": Sets the label of the button.
  • onclick="history.back()": Executes the JavaScript history.back() method when the button is clicked.
• JavaScript Explanation: The history.back() method loads the previous URL from the browser’s history list. This action is equivalent to clicking the “Back” button in your browser.

• • • history.back(): This method loads the previous URL in the history list. It’s the same as clicking the back button in the browser or using history.go(-1).
  • Definition and Usage:
    • Definition: The history.back() method is used to navigate to the previous URL in the history list.
    • Usage: It’s particularly useful for single-page applications or specific scenarios where you want to control navigation within your site.
  • Important Notes:
    • Nonexistent Previous Page: The history.back() method will not work if there is no previous page in the history list.
    • Going Forward: To navigate to the next URL in the history list, you can use the history.forward() method.

• Example:

  Here is a complete example of a simple HTML page with a “Go Back” button: