【javascript】onclickとonchangeでリンク先へジャンプする方法
やりたいこと
以下のように、ボタンをクリックしたり、セレクトボックス内のオプション を選択した時に、リンク先にジャンプする方法を紹介します。
共通の関数
以下は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>このページ内のリンクにジャンプできます。
参考
ページ内リンクとページトップへのスムーススクロールの実装
scrollToのOptions未対応にも対応させる
【javascript】ある程度スクロールしたら現れる、ページトップに戻るボタンの作り方
【javascript】セレクトボックス
onchangeで選択されたものに合わせてoptionを自動生成する方法
【javascript】onclickの書き方と使い方 クリックした値を取得する
まとめ
-
共通の関数
function jump(value) { window.location.href = value; } - 関数jumpの引数valueにURLを渡す
