クリック時の処理(onClick)

広告

リンクやフォーム内のボタンなどをクリックした場合の処理を記述します。 

<input type="button" onClick="処理">
<input type="radio" onClick="処理">
<a href="...." onClick="処理">

例えばフォームのボタンのクリック時の処理を記述する場合は次のようになります。 

function kakunin(){
  ret = confirm("Yahoo!Japanへ飛びます。宜しいですか？");
  if (ret == true){
    location.href = "http://www.yahoo.co.jp/";
  }
}

....

<form name="test">
<input type="button" value="Yahoo!Japanへリンク" onClick="kakunin()">
</form>
サンプルコード

では実際に試してみます。 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<script type="text/javascript" src="./js/script2_1.js">
</script>

<title>JavaScript テスト</title>
</head>
<body>

<p>
<form name="test">
<input type="button" name="yahoo" value="Yahoo!Japanへ" onClick="kakunin(1)">
<input type="button" name="google" value="Googleへ" onClick="kakunin(2)">
</form>
</p>

</body>
</html>

function kakunin(btnNo){
  if (btnNo == 1){
    link = "Yahoo!Japan";
    href = "http://www.yahoo.co.jp/";
  }else{
    link = "Google";
    href = "http://www.google.co.jp/";
  }

  ret = confirm(link + "へ飛びます。宜しいですか？");
  if (ret == true){
    location.href = href;
  }
}

上記をブラウザで見ると下記のように表示されます。

p2-1

左のボタンをクリックすると下記のようにダイアログが表示されます。

p2-2

ダイアログの「OK」ボタンを押すとダイアログが閉じてリンク先へ移動します。

p2-3

なお右のボタンを押した場合は下記のようなダイアログが表示されます。

p2-4

このように「onClick」を使用することでクリック時の処理を記述することができます。

( Written by Tatsuo Ikura )