ボタンのクリック時にJavaScriptを実行する - JavaScript
ボタンがクリックされたタイミングでJavaScriptを実行するコードを紹介します。
概要
typeがbuttonのinputタグのボタン、または buttonタグによるボタンがクリックされたタイミングでJavaScriptを実行する場合には、ボタンのonClickイベントを実装します。
inputタグまたはbuttonタグのonClick属性にJavaScriptを記述することで、onClickイベントを実装でき、ボタンクリック時にJavaScriptを実行できます。
書式:inputタグ
ボタンのinputタグ内に onclick 属性を記述し、値に実行するJavaScriptのコードを記述します。
<input type="button" value="(ボタンのキャプション)" onclick="(実行するJavaScriptのコード)"/>
書式:buttonタグ
buttonタグ内に onclick 属性を記述し、値に実行するJavaScriptのコードを記述します。
<button onclick="(実行するJavaScriptのコード)" >(ボタンのキャプション)</button>
実装例1:関数を呼び出す方式
コード
下記のHTMLファイルを作成します。
<!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">
<head>
<title></title>
<script language="javascript" type="text/javascript">
function OnButtonClick() {
target = document.getElementById("output");
target.innerHTML = "Penguin";
}
</script>
</head>
<body>
<input type="button" value="Exec" onclick="OnButtonClick();"/><br />
<br />
<div id="output"></div>
</body>
</html>
解説
下記のコードがボタンのINPUTタグです。INPUTタグ内のonclick属性に実行したいJavaScriptを記述します。
今回の例では、呼び出す関数名(OnButtonClick)を記述しています。ボタンがクリックされるとOnButtonClick()関数が呼び出されます。
<input type="button" value="Exec" onclick="OnButtonClick();"/><br />
下記コードがボタンがクリックされたときに呼び出されて実行されるJavaScriptの関数の実装になります。
この関数(OnButtonClick)では、"output"のIDを持つタグの要素を取得し、そのタグの内部のテキストに"Penguin"の文字列を挿入します。
<script language="javascript" type="text/javascript">
function OnButtonClick() {
target = document.getElementById("output");
target.innerHTML = "Penguin";
}
</script>
実行結果
上記のHTMLファイルをWebブラウザで表示すると、下図の画面が表示されます。
Execボタンをクリックします。"Penguin"の文字が画面に表示されます。
実装例2:onclick属性内へのJavaScriptの記述
onclick属性内に直接JavaScriptのコードを記述しても動作します。
JavaScriptの「"」ダブルクォーテーションは「'」シングルクォーテーションに変えています。
次のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<input type="button" value="Exec" onclick="document.getElementById('output').innerHTML='ぺんぎん';" /><br />
<br />
<div id="output"></div>
</body>
</html>
実行結果
上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。
[Exec]ボタンをクリックすると下図の状態になります。「ぺんぎん」の文字列がoutputのID要素の位置に表示されることが確認できます。
補足2:onclick属性内へのJavaScriptの複数処理の記述
onclick属性内に複数行のJavaScriptを記述する場合は、
;(セミコロン)で区切れば、複数行のJavaScriptを記述可能です。
以下のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<input type="button" value="Exec"
onclick="a = 10; b = 23; c = a + b; target = document.getElementById('output'); target.innerHTML=c;" /><br />
<br />
<div id="output"></div>
</body>
</html>
実行結果
上記のHTMLファイルをWebブラウザで表示し[Exec]ボタンをクリックした後の状態は下図になります。
実装例3:buttonタグの利用
inputタグではなく、buttonタグを利用する方法の紹介です。
コード
以下のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script language="javascript" type="text/javascript">
function OnButtonClick() {
target = document.getElementById("output");
target.innerHTML = "ボタンがクリックされました。";
}
</script>
</head>
<body>
<h1>button タグのデモ</h1>
<button onclick="OnButtonClick();" >クリックしてね</button>
<hr />
<div id="output"></div>
</body>
</html>
解説
buttonタグを利用する場合もinputタグと同様に onclick 属性に実行するJavaScriptのコードを記述します。
実行結果
上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
[クリックしてね]のボタンをクリックします。クリックするとJavaScriptが実行され、ページ下部にクリックされた旨のメッセージが表示されます。
このページのキーワード
- ボタンのクリック時にJSを実行する
- JavaScript 実行 ボタン クリック
- JS 実行 ボタン クリック
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
掲載日: 2011-06-14
改訂日: 2023-12-22
