HTML JavaScript

HTML&JavaScriptを使って「戻る」「進む」「更新」ボタンを作成する方法

HTML&JavaScriptを使って「戻る」「進む」「更新」ボタンを作成する方法

今回はHTMLとJavaScriptを使って「戻るボタン」「進むボタン」「更新ボタン」を作成する方法をご紹介します。

どのボタンもページ遷移の操作には欠かせない重要な要素です。

一見すると難しそうな操作ですが、ほんの数行を書くだけで済む簡単な作業ですので、みなさんもぜひ試してみてくださいね。

今回のテーマ

  • HTMLとJavaScriptを使って戻るボタンを作る方法
  • HTMLとJavaScriptを使って進むボタンを作る方法
  • HTMLとJavaScriptを使って更新ボタンを作る方法

当サイトではウェブサイトやブログに関する記事を毎日投稿しています。
他の記事も合わせて読んでいただけると嬉しいです。

HTMLとJavaScriptを使って戻るボタンを作る方法

まずはHTMLとJavaScriptを使って戻るボタンを作る方法ですが以下の通りです。

まずHTMLで、modoru()という関数が呼び出されるボタンを作成します。

modoru()関数では1つ前のページに戻るという操作「history.back()」をJavaScriptで指定しています。

HTMLとJavaScriptを使って進むボタンを作る方法

まずはHTMLとJavaScriptを使って進むボタンを作る方法ですが以下の通りです。

まずHTMLで、susumu()という関数が呼び出されるボタンを作成します。

susumu()関数では1つ前のページに進むという操作「history.forward()」をJavaScriptで指定しています。

HTMLとJavaScriptを使って更新ボタンを作る方法

まずはHTMLとJavaScriptを使って更新ボタンを作る方法ですが以下の通りです。

まずHTMLで、kousin()という関数が呼び出されるボタンを作成します。

koushin()関数では1つ前のページに戻るという操作「location.reload()」をJavaScriptで指定しています。

ちなみにHTMLだけを使って実装したい時は以下のコードを書きましょう。

あここではaタグで空のリンク先を設定しています。

HTMLの場合、リンク先が空のときはリロードする仕組みになっています。

まとめ

まとめ

  • 戻る処理ではhistory.back()
  • 進む処理ではhistory.forward()
  • 更新処理ではlocation.reload()

関数をJavaScriptで書こう

今回はHTML&JavaScriptを使って「戻る」「進む」「更新」ボタンを作成する方法について解説しました。

ご覧の通り、簡単なコードを数行書くだけで簡単に実装できるのでおすすめです。

みなさんも是非実践してみてください!

わからない部分がある方はお問合せフォームで質問して貰えばすぐに返信します。

今サイトではこれからもウェブサイト運営に関する有益な情報をたくさん発信していきたいと思っていますので応援よろしくお願いします!

▼プログラミングで行き詰まっている方はこちらの記事がオススメです▼

プログラミングを理解できないときの対処法【5つのパターンから解説します】
プログラミングを理解できないときの対処法【5つのパターンから解説します】

続きを見る

プログラミングスクールおすすめ6選【料金や口コミを徹底比較】
プログラミングスクールおすすめ6選【料金や口コミを徹底比較】

続きを見る

プログラミングでエラーが発生したときの解決方法
プログラミングでエラーが発生したときの解決方法

続きを見る

▼最新映画や漫画が無料で見れちゃう▼
▼最新ドラマや漫画が無料で見れちゃう▼

-HTML, JavaScript

Copyright © wagtechblog All Rights Reserved.