▲TOPへ戻る

【javascript】onclickとonchangeでリンク先へジャンプする方法

json

やりたいこと

以下のように、ボタンをクリックしたり、セレクトボックス内のオプション を選択した時に、リンク先にジャンプする方法を紹介します。

共通の関数

以下はonclick, onchange共通の関数です。

関数jumpの引数valueにURLを渡すことで、URLをhrefに設定することができます。

function jump(value) {
  window.location.href = value;
}

onclickでリンク先へジャンプ

HTML

URLを変数に格納し、関数jumpの引数に変数を指定します。

関数jumpの引数に直接URLを書くこともできます。お好みで。

<div class="wrapper">
  <button onclick="jump(yahooJapan)">Yahoo Japan</button>
  <button onclick="jump(google)">Google</button>
  <button onclick="jump(youTube)">You Tube</button>
  // 以下でもOK‼
  <button onclick="jump('https://www.youtube.com')">You Tube</button>
</div>

javascript

const yahooJapan = "https://www.yahoo.co.jp/";
const google = "https://www.google.com";
const youTube = "https://www.youtube.com";

function jump(value) {
  window.location.href = value;
}

onchangeでリンク先へジャンプ

オプションのvalueにURL を指定します。

<select onchange="jump(value)">
  <option value="#" disabled selected>選択してください</option>
  <option value="https://www.yahoo.co.jp/">Yahoo Japan</option>
  <option value="https://www.google.com">Google</option>
  <option value="https://www.youtube.com">You Tube</option>
</select>

ページ内リンクでもOK‼

<select onchange="jump(value)">
  <option value="#" disabled selected>選択してください</option>
  <option value="#index1">やりたいこと</option>
  <option value="#index2">onclickでリンク先へジャンプ</option>
  <option value="#index3">onchangeでリンク先へジャンプ</option>
</select>

このページ内のリンクにジャンプできます。

参考

js
ページ内リンクとページトップへのスムーススクロールの実装 scrollToのOptions未対応にも対応させる
js
【javascript】ある程度スクロールしたら現れる、ページトップに戻るボタンの作り方
js
【javascript】セレクトボックス onchangeで選択されたものに合わせてoptionを自動生成する方法
js
【javascript】onclickの書き方と使い方 クリックした値を取得する

まとめ

  1. 共通の関数
    function jump(value) {
      window.location.href = value;
    }
  2. 関数jumpの引数valueにURLを渡す

profile

パソコン好きなガオ

コロナ禍によるステイホームを機にプログラミングを学ぶ。パソコンに関してはプロではないが、ちょっと詳しい程度。

パソコン

javascript

カメラ

ブログ