[JavaScript] onClick()を使ってフォームのボタンが押されたときの処理を作る

ウェブを構築するときにJavaScriptを使うシーンとして多いのが、フォームのボタンを押したときの処理です。

今回は google yahoo! という2つのボタンを表示させ、それをクリックしたときに google yahoo! それぞれのページに飛ぶという基本的な処理を作ってみます。

onClickを使った処理

XHTML

HTMLはシンプルです。inputのところに onClick=”linkCheck(数字)”を付けています。ボタンがクリックされたときに linkCheck関数を実行し、その変数として数字を設定します。

JavaScript

JavaScript にはボタンが押されたときの処理を受け持つ linkCheck()関数を書きます。

2行目:linkCheck(btn)という関数を定義します。btnには数字が入ります。

3行目:if ( btn == 1 ) 関数の変数(ボタン番号)が1の場合の処理です。

4・5行目:link , href それぞれに値を代入します。(yahoo!の値)

6行目:if ( btn == 2 ) 関数の変数(ボタン番号)が2の場合の処理です。

7・8行目:link , href それぞれに値を代入します。(googleの値)

11行目:確認のダイアログボックスを表示する記述。confirm(link + “を表示します。”) linkは上記で代入した値が入ります。

12行目:ボタンが押されたときの処理 if (ret == true)。 ボタンが押されると ret に true が入ります。

13行目:リンク先の指定 location.href = href; でリンク先のアドレスを指定しています。

location.href=”URL”

は指定されたURLへジャンプします。

動作サンプル

ボタンをクリックするとgoogle yahoo!が表示されます。



locationのリファレンス

項目説明
location.href指定したURLへ移動
location.hash指定したハッシュへ移動
location.hostホスト名・ポート番号を取得
location.hostnameホスト名を取得
location.portポート番号を取得
location.pathname指定したパスへ移動
location.reload("")URLを再読込
location.replace("")指定したURLへ移動
document.referrerリンク元のリファラを取得


Author: webmaster