Computer Programming Languages JavaScript

How to make a Go-Back Input button with inline JavaScript

By Bernard Aybout (Virii8) April 29, 2018

[fusion_builder_container type=”flex” hundred_percent=”no” equal_height_columns=”no” menu_anchor=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” background_color=”” background_image=”” background_position=”center center” background_repeat=”no-repeat” fade=”no” background_parallax=”none” parallax_speed=”0.3″ video_mp4=”” video_webm=”” video_ogv=”” video_url=”” video_aspect_ratio=”16:9″ video_loop=”yes” video_mute=”yes” overlay_color=”” video_preview_image=”” border_color=”” border_style=”solid” padding_top=”” padding_bottom=”” padding_left=”” padding_right=””][fusion_builder_row][fusion_builder_column type=”1_1″ layout=”1_1″ background_position=”left top” background_color=”” border_color=”” border_style=”solid” border_position=”all” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding_top=”” padding_right=”” padding_bottom=”” padding_left=”” margin_top=”0px” margin_bottom=”0px” class=”” id=”” animation_type=”” animation_speed=”0.3″ animation_direction=”left” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” center_content=”no” last=”true” min_height=”” hover_type=”none” link=”” border_sizes_top=”” border_sizes_bottom=”” border_sizes_left=”” border_sizes_right=”” first=”true”][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”” rule_size=”” rule_color=”” hue=”” saturation=”” lightness=”” alpha=”” user_select=”” content_alignment_medium=”” content_alignment_small=”” content_alignment=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” sticky_display=”normal,sticky” class=”” id=”” margin_top=”50px” margin_right=”” margin_bottom=”50px” margin_left=”” fusion_font_family_text_font=”” fusion_font_variant_text_font=”” font_size=”” line_height=”” letter_spacing=”” text_transform=”” text_color=”” animation_type=”” animation_direction=”left” animation_color=”” animation_speed=”0.3″ animation_delay=”0″ animation_offset=”” logics=””]

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.

[/fusion_text][fusion_syntax_highlighter theme=”” language=”html” line_numbers=”” line_wrapping=”” copy_to_clipboard=”” copy_to_clipboard_text=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” font_size=”” border_size=”” border_color=”” hue=”” saturation=”” lightness=”” alpha=”” border_style=”” background_color=”” line_number_background_color=”” line_number_text_color=”” margin_top=”” margin_right=”” margin_bottom=”” margin_left=””]PGlucHV0IHR5cGU9ImJ1dHRvbiIgdmFsdWU9IkdvIEJhY2sgRnJvbSBXaGVuY2UgWW91IENhbWUhIiBvbmNsaWNrPSJoaXN0b3J5LmJhY2soKSI+[/fusion_syntax_highlighter][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”” rule_size=”” rule_color=”” hue=”” saturation=”” lightness=”” alpha=”” user_select=”” content_alignment_medium=”” content_alignment_small=”” content_alignment=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” sticky_display=”normal,sticky” class=”” id=”” margin_top=”50px” margin_right=”” margin_bottom=”50px” margin_left=”” fusion_font_family_text_font=”” fusion_font_variant_text_font=”” font_size=”” line_height=”” letter_spacing=”” text_transform=”” text_color=”” animation_type=”” animation_direction=”left” animation_color=”” animation_speed=”0.3″ animation_delay=”0″ animation_offset=”” logics=””]

- 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.

[/fusion_text][fusion_syntax_highlighter theme=”” language=”html” line_numbers=”” line_wrapping=”” copy_to_clipboard=”” copy_to_clipboard_text=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” font_size=”” border_size=”” border_color=”” hue=”” saturation=”” lightness=”” alpha=”” border_style=”” background_color=”” line_number_background_color=”” line_number_text_color=”” margin_top=”” margin_right=”” margin_bottom=”” margin_left=””]aGlzdG9yeS5mb3J3YXJkKCk7[/fusion_syntax_highlighter][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”” rule_size=”” rule_color=”” hue=”” saturation=”” lightness=”” alpha=”” user_select=”” content_alignment_medium=”” content_alignment_small=”” content_alignment=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” sticky_display=”normal,sticky” class=”” id=”” margin_top=”50px” margin_right=”” margin_bottom=”50px” margin_left=”” fusion_font_family_text_font=”” fusion_font_variant_text_font=”” font_size=”” line_height=”” letter_spacing=”” text_transform=”” text_color=”” animation_type=”” animation_direction=”left” animation_color=”” animation_speed=”0.3″ animation_delay=”0″ animation_offset=”” logics=””]

Example:

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

[/fusion_text][fusion_syntax_highlighter theme=”” language=”html” line_numbers=”” line_wrapping=”” copy_to_clipboard=”” copy_to_clipboard_text=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” font_size=”” border_size=”” border_color=”” hue=”” saturation=”” lightness=”” alpha=”” border_style=”” background_color=”” line_number_background_color=”” line_number_text_color=”” margin_top=”” margin_right=”” margin_bottom=”” margin_left=””]PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KPGhlYWQ+CiAgICA8bWV0YSBjaGFyc2V0PSJVVEYtOCI+CiAgICA8bWV0YSBuYW1lPSJ2aWV3cG9ydCIgY29udGVudD0id2lkdGg9ZGV2aWNlLXdpZHRoLCBpbml0aWFsLXNjYWxlPTEuMCI+CiAgICA8dGl0bGU+R28gQmFjayBCdXR0b24gRXhhbXBsZTwvdGl0bGU+CjwvaGVhZD4KPGJvZHk+CiAgICA8aDE+V2VsY29tZSB0byBNeSBQYWdlPC9oMT4KICAgIDxwPkNsaWNrIHRoZSBidXR0b24gYmVsb3cgdG8gZ28gYmFjayB0byB0aGUgcHJldmlvdXMgcGFnZTo8L3A+CiAgICA8aW5wdXQgdHlwZT0iYnV0dG9uIiB2YWx1ZT0iR28gQmFjayBGcm9tIFdoZW5jZSBZb3UgQ2FtZSEiIG9uY2xpY2s9Imhpc3RvcnkuYmFjaygpIj4KPC9ib2R5Pgo8L2h0bWw+Cg==[/fusion_syntax_highlighter][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”” rule_size=”” rule_color=”” hue=”” saturation=”” lightness=”” alpha=”” user_select=”” content_alignment_medium=”” content_alignment_small=”” content_alignment=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” sticky_display=”normal,sticky” class=”” id=”” margin_top=”” margin_right=”” margin_bottom=”” margin_left=”” fusion_font_family_text_font=”” fusion_font_variant_text_font=”” font_size=”” line_height=”” letter_spacing=”” text_transform=”” text_color=”” animation_type=”” animation_direction=”left” animation_color=”” animation_speed=”0.3″ animation_delay=”0″ animation_offset=”” logics=””]

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!

[/fusion_text][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”” rule_size=”” rule_color=”” hue=”” saturation=”” lightness=”” alpha=”” user_select=”” content_alignment_medium=”” content_alignment_small=”” content_alignment=”center” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” sticky_display=”normal,sticky” class=”” id=”” margin_top=”50px” margin_right=”” margin_bottom=”” margin_left=”” fusion_font_family_text_font=”” fusion_font_variant_text_font=”” font_size=”” line_height=”” letter_spacing=”” text_transform=”” text_color=”” animation_type=”” animation_direction=”left” animation_color=”” animation_speed=”0.3″ animation_delay=”0″ animation_offset=”” logics=””]

How to Go Back to Previous Page in Javascript

[/fusion_text][fusion_youtube id=”https://www.youtube.com/watch?v=kNZZ36aA1rs” alignment=”center” width=”” height=”” start_time=”” end_time=”” autoplay=”false” mute=”false” api_params=”” title_attribute=”” video_facade=”” thumbnail_size=”auto” margin_top=”50px” margin_bottom=”50px” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” css_id=”” structured_data=”off” video_upload_date=”” video_duration=”” video_title=”” video_desc=”” /][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”” rule_size=”” rule_color=”” hue=”” saturation=”” lightness=”” alpha=”” user_select=”” content_alignment_medium=”” content_alignment_small=”” content_alignment=”center” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” sticky_display=”normal,sticky” class=”” id=”” margin_top=”50px” margin_right=”” margin_bottom=”” margin_left=”” fusion_font_family_text_font=”” fusion_font_variant_text_font=”” font_size=”” line_height=”” letter_spacing=”” text_transform=”” text_color=”” animation_type=”” animation_direction=”left” animation_color=”” animation_speed=”0.3″ animation_delay=”0″ animation_offset=”” logics=””]

Here is an example of the implemented button, this will take you back one in your history if one exists.

[/fusion_text][fusion_code]PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KPGhlYWQ+CiAgICA8bWV0YSBjaGFyc2V0PSJVVEYtOCI+CiAgICA8bWV0YSBuYW1lPSJ2aWV3cG9ydCIgY29udGVudD0id2lkdGg9ZGV2aWNlLXdpZHRoLCBpbml0aWFsLXNjYWxlPTEuMCI+CiAgICA8dGl0bGU+R28gQmFjayBCdXR0b24gRXhhbXBsZTwvdGl0bGU+CiAgICA8c3R5bGU+CiAgICAgICAgLmdvLWJhY2stYnV0dG9uIHsKICAgICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogIzMzMzsgLyogRGFyayBiYWNrZ3JvdW5kIGNvbG9yICovCiAgICAgICAgICAgIGNvbG9yOiAjMDBmZjAwOyAvKiBHcmVlbiB0ZXh0IGNvbG9yICovCiAgICAgICAgICAgIHBhZGRpbmc6IDEwcHggMjBweDsKICAgICAgICAgICAgYm9yZGVyOiBub25lOwogICAgICAgICAgICBjdXJzb3I6IHBvaW50ZXI7CiAgICAgICAgICAgIGZvbnQtc2l6ZTogMTZweDsKICAgICAgICAgICAgYm9yZGVyLXJhZGl1czogNXB4OwogICAgICAgIH0KCiAgICAgICAgLmdvLWJhY2stYnV0dG9uOmhvdmVyIHsKICAgICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogIzQ0NDsgLyogU2xpZ2h0bHkgbGlnaHRlciBkYXJrIGNvbG9yIGZvciBob3ZlciBlZmZlY3QgKi8KICAgICAgICB9CgogICAgICAgIC5tZXNzYWdlIHsKICAgICAgICAgICAgbWFyZ2luLXRvcDogMjBweDsKICAgICAgICAgICAgY29sb3I6IHJlZDsKICAgICAgICAgICAgZm9udC13ZWlnaHQ6IGJvbGQ7CiAgICAgICAgfQogICAgPC9zdHlsZT4KICAgIDxzY3JpcHQ+CiAgICAgICAgZnVuY3Rpb24gZ29CYWNrKCkgewogICAgICAgICAgICBpZiAod2luZG93Lmhpc3RvcnkubGVuZ3RoID4gMSkgewogICAgICAgICAgICAgICAgd2luZG93Lmhpc3RvcnkuYmFjaygpOwogICAgICAgICAgICB9IGVsc2UgewogICAgICAgICAgICAgICAgZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoIm1lc3NhZ2UiKS5pbm5lclRleHQgPSAiTm8gcHJldmlvdXMgcGFnZSBpbiBoaXN0b3J5LiI7CiAgICAgICAgICAgIH0KICAgICAgICB9CiAgICA8L3NjcmlwdD4KPC9oZWFkPgo8Ym9keT4KICAgIDxoMT5XZWxjb21lIHRvIE15IFBhZ2U8L2gxPgogICAgPHA+Q2xpY2sgdGhlIGJ1dHRvbiBiZWxvdyB0byBnbyBiYWNrIHRvIHRoZSBwcmV2aW91cyBwYWdlOjwvcD4KICAgIDxpbnB1dCB0eXBlPSJidXR0b24iIHZhbHVlPSJHbyBCYWNrIEZyb20gV2hlbmNlIFlvdSBDYW1lISIgb25jbGljaz0iZ29CYWNrKCkiIGNsYXNzPSJnby1iYWNrLWJ1dHRvbiI+CiAgICA8cCBpZD0ibWVzc2FnZSIgY2xhc3M9Im1lc3NhZ2UiPjwvcD4KPC9ib2R5Pgo8L2h0bWw+Cg==[/fusion_code][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”” rule_size=”” rule_color=”” hue=”” saturation=”” lightness=”” alpha=”” user_select=”” content_alignment_medium=”” content_alignment_small=”” content_alignment=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” sticky_display=”normal,sticky” class=”” id=”” margin_top=”50px” margin_right=”” margin_bottom=”” margin_left=”” fusion_font_family_text_font=”” fusion_font_variant_text_font=”” font_size=”” line_height=”” letter_spacing=”” text_transform=”” text_color=”” animation_type=”” animation_direction=”left” animation_color=”” animation_speed=”0.3″ animation_delay=”0″ animation_offset=”” logics=””]

How to make a Go-Back Input button with inline JavaScript

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

Step-by-Step Guide

Example:

Summary

How to Go Back to Previous Page in Javascript

Here is an example of the implemented button, this will take you back one in your history if one exists.

Related Videos:

Related Posts: