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
- 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 JavaScripthistory.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 usinghistory.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.
- Definition: The
- 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.
- Nonexistent Previous Page: The
-
-
Example:
Here is a complete example of a simple HTML page with a “Go Back” button:
Summary
In this lesson, you learned how to create a “Go Back” button using the history.back()
method in JavaScript. This method allows users to navigate to the previous URL in their browser’s history, similar to using the browser’s back button. Remember to consider whether this feature is necessary for your site, as modern browsers already provide back navigation functionality.
Feel free to experiment with the code and integrate it into your projects where you find it useful!
Here is an example of the implemented button, this will take you back one in your history if one exists.
Welcome to My Page
Click the button below to go back to the previous page: