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

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

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

Contents

1 onClickを使った処理
2 locationのリファレンス

onClickを使った処理

XHTML

<form name="sample">
<input type="button" name="yahoo" value="Yahoo!" onClick="linkCheck(1)">
<input type="button" name="google" value="Google" onClick="linkCheck(2)">
</form>

</form>

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

JavaScript

<script type="text/javascript">
function linkCheck(btn){
  if ( btn == 1 ){
    link = "Yahoo!";
    href = "http://www.yahoo.co.jp/";
  }else if ( btn == 2 ){
    link = "Google";
    href = "http://www.google.co.jp/";
  }

  ret = confirm(link + "を表示します。");
  if (ret == true){
    location.href = href;
  }
}
</script>

function linkCheck(btn){

if ( btn == 1 ){

link = "Yahoo!";

href = "http://www.yahoo.co.jp/";

}else if ( btn == 2 ){

link = "Google";

href = "http://www.google.co.jp/";

}

ret = confirm(link + "を表示します。");

if (ret == true){

location.href = href;

}

</script>

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

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

３行目：if ( btn == 1 )　関数の変数（ボタン番号）が１の場合の処理です。

４・５行目：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	リンク元のリファラを取得