Posted in JavaScript

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

   Published Date: 2015年9月20日

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

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

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>

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>

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のリファレンス

[table id=32 /]



Author: webmaster