ボタンのクリック時に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ブラウザで表示すると、下図の画面が表示されます。
ボタンのクリック時にJavaScriptを実行するコードと実行結果:画像1

Execボタンをクリックします。"Penguin"の文字が画面に表示されます。
ボタンのクリック時にJavaScriptを実行するコードと実行結果:画像2

実装例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ブラウザで表示します。下図の画面が表示されます。
ボタンのクリック時にJavaScriptを実行するコードと実行結果:画像3

[Exec]ボタンをクリックすると下図の状態になります。「ぺんぎん」の文字列がoutputのID要素の位置に表示されることが確認できます。
ボタンのクリック時にJavaScriptを実行するコードと実行結果:画像4

補足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]ボタンをクリックした後の状態は下図になります。
ボタンのクリック時にJavaScriptを実行するコードと実行結果:画像5

実装例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を実行するコードと実行結果:画像6

[クリックしてね]のボタンをクリックします。クリックするとJavaScriptが実行され、ページ下部にクリックされた旨のメッセージが表示されます。
ボタンのクリック時にJavaScriptを実行するコードと実行結果:画像7

A.W.S (Another World Story)

ボタンのクリック時にJavaScriptを実行するコードと実行結果:画像8
黄昏色に染まるコワーキングスペース。窓の外では春の雨がガラスをやさしく叩き、珈琲の残り香が空気に溶けている。 磨かれた木のテーブルに三つ並んだノートパソコンの液晶が、雨雲よりも淡い光で彼らの顔を照らしていた。

ジョニーはキーを叩き、画面に最小限の 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を実行するコードと実行結果
AuthorPortraitAlt
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
作成日: 2011-06-14
改訂日: 2023-12-22
Copyright © 1995–2025 iPentec all rights reserverd.