ボタンのクリック時にJavaScriptを実行するコードと実行結果
ボタンが押されたらJavaScriptを実行するコードと実行結果を紹介します。
概要
inputタグのtype属性がbuttonのボタン、または 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が実行され、ページ下部にクリックされた旨のメッセージが表示されます。
A.W.S (Another World Story)
黄昏色に染まるコワーキングスペース。窓の外では春の雨がガラスをやさしく叩き、珈琲の残り香が空気に溶けている。
磨かれた木のテーブルに三つ並んだノートパソコンの液晶が、雨雲よりも淡い光で彼らの顔を照らしていた。
ジョニーはキーを叩き、画面に最小限の HTML を組み上げる。たった一つのボタンと、空の段落要素が並ぶだけ――それなのに彼は満足げだ。
彼の指先はすぐに JavaScript へと移り、三行のコードを添える。
const btn = document.getElementById('magic');
btn.addEventListener('click', () => {
document.getElementById('message').textContent =
`ボタンが押されました：${new Date().toLocaleTimeString()}`;
});
ジョナスンは腕を組んで首をかしげる。
それだけか、と表情が言っている。
ジョニーは笑い、テスト用のボタンを押す。無垢な白いページに、淡くグレーの文字が浮かび上がる
――ボタンが押された時刻を正確に告げる二十四時間時計だ。結果は即座、静かで、それでいて確かな生命を宿している。
ジョナスンの目尻が緩む。
時間を刻むだけなら簡単だが、味気ない、と彼はぼやく。
するとジョセフィーヌが椅子ごと身体を引き寄せた。彼女のラップトップには、同じコードが複製されているが、すでに数行の追加が見えた。
let count = 0;
btn.addEventListener('click', () => {
count++;
const msg = document.getElementById('message');
msg.textContent = `クリック回数：${count}`;
if (count === 10) {
msg.textContent = '休憩の時間です☕';
btn.disabled = true;
}
});
ジョニーが目を輝かせる。ジョナスンは思わず笑う。十回目で強制休憩とは、コードにも健康管理をさせるのか。
ふと、ジョニーが悪戯心に駆られ、素早く十回目のクリックを打ち込んだ。ページ上のボタンが淡く灰色に変わり、クリックを拒む。段落要素は大文字で宣告する――休憩の時間です☕。
だが彼らの笑い声をさえぎるかのように、テーブル脇の古びた自動販売機がウイーンと唸った。銀色の投入口から湯気を立てた紙コップが滑り出し、珈琲の香りが一段と濃く漂う。三人は顔を見合わせる。誰もお金など入れていない。
ジョセフィーヌが眉を跳ね上げる。
ええ、ちょっと仕掛けを足したわ、と彼女は肩をすくめるそぶりを見せる。実はボタンが十回押されたら、ローカルネットワーク経由で IoT 化された自販機に信号を送る webhook を裏で走らせていたのだという。
ジョナスンは口を開けて笑い、ジョニーは天を仰いだ。コードは確かにブラウザの中で完結する――そのはずだった。しかし十行足らずの JavaScript が、湿り気を帯びた夜に熱い珈琲を呼び寄せる魔法へと化けた。
三人は立ち上がり、紙コップを手に取る。雨脚は幾分弱まっている。
ジョニーはカップの縁を唇に当てながら思う。クリック一つで世界を変えるのは、決して大げさな比喩ではない。
ジョセフィーヌの得意げな微笑が揺れ、ジョナスンが肩を震わせる。
そして――
テーブルに残った灰色のボタンは、なお無効化されたまま。けれど彼らの背後で、もう一つコーヒーのカップが滑り出てきた。十クリック目を検知したのはブラウザだけではなかったらしい。
プログラムは正確に動作している。だが、誰が止めるのか。夜のコワーキングスペースに、押されることのないボタンのためのコーヒーが、静かに積み上がっていく。
このページのキーワード
- ボタンのクリック時にJSを実行するコードと実行結果
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
作成日: 2011-06-14
改訂日: 2023-12-22
