JavaScriptでボタンが押されたら？クリックイベントの書き方やif文・色の変更など

Webサイトに「動き」をつけたいと思ったとき、最初に覚えるべきなのが「ボタンが押されたときのアクション」です。

この記事では、JavaScriptでボタンが押されたときの処理の書き方を、基本から応用まで徹底的に解説します。

単なる構文の紹介だけでなく、現場で役立つ「IDの取得方法」や「自動クリックのさせ方」など、具体的なサンプルコードを交えてお届けしますので、ぜひ自分のコードに活用してください。

JavaScriptでボタンが押されたときの基本の書き方

まずは、ボタンがクリックされたことを検知するための最も標準的な方法を学びましょう。

現在のWeb開発において、HTMLでボタンを作成し、JavaScriptの addEventListener を使って動きをつけるのが最も推奨される作法です。

以前はHTMLタグの中に直接書く方法もありましたが、デザイン（HTML）と処理（JS）を分けることで、後からの修正が非常に楽になります。

ボタンクリックを検知する基本コード

<!-- HTMLでボタンを作成 -->
<button id="myButton">ここをクリック！</button>

<script>
    // 1. ボタン要素をIDで取得する
    const btn = document.getElementById('myButton');

    // 2. クリックイベントを登録する
    btn.addEventListener('click', () => {
        // ここにボタンが押されたときの処理を書く
        console.log('ボタンが押されました！');
        alert('クリックを検知しました');
    });
</script>

まず、HTML側で <button> タグを用意し、JavaScriptから見つけやすいように id="myButton" という目印（ID）を付けています。

JavaScript側では、document.getElementById という命令を使って、このIDを持つボタンを探し出し、btn という変数に格納しています。

次に、その変数に対して addEventListener というメソッドを呼び出しています。
これは「特定の動作（イベント）が発生するのを待ち構える」という役割を持っており、第一引数に 'click' を指定することで、ボタンが押されるのを監視し始めます。

第二引数の () => { ... } の中身が、実際にクリックされた際に実行される「関数」です。
この中に書かれた命令が、ユーザーのクリックに反応して次々と動いていきます。

ボタンを押すと文字が変わる・文字を表示するテクニック

ボタンクリックの次にやりたいこととして多いのが、画面上の「テキスト」を操作することです。

「送信」ボタンを押した後に「完了しました」と文字を書き換えたり、隠していたメッセージを表示させたりすることで、ユーザーに現在の状態をわかりやすく伝えることができます。

ボタンクリックで文字表示・変更を行うコード

<p id="displayText">ボタンを押すとここが変わります</p>
<button id="textChangeBtn">文字を変更する</button>

<script>
    const textElement = document.getElementById('displayText');
    const changeBtn = document.getElementById('textChangeBtn');

    changeBtn.addEventListener('click', () => {
        // textContentプロパティを使って中身を書き換える
        textElement.textContent = '文字が新しくなりました！';
        
        // 文字の色も同時に変えるなどの応用も可能
        textElement.style.fontWeight = 'bold';
    });
</script>

この処理では、文字が表示されている <p> タグの中身を動的に変更しています。

重要なキーワードは textContent です。
これは、要素が持っている「テキスト情報そのもの」を指しており、ここに新しい文字列を代入することで、瞬時にブラウザの表示が更新されます。

単に文字を変えるだけでなく、style.fontWeight を使うことで「太字にする」といった視覚的な変化も追加しています。

このように、ボタンイベントをきっかけにDOM（Document Object Model）を操作することで、Webページは単なる文書から「動くアプリケーション」へと進化を遂げます。

ボタンが押されたら色を変える：見た目の変化をつける

ユーザーのクリック体験を向上させるために、「ボタンが押されたら色を変える」という演出は非常に効果的です。
特定のエリアの背景色を変えたり、ボタン自体のデザインを変更したりする方法を見ていきましょう。

背景色をランダムに変えるサンプル

<div id="colorBox" style="width: 200px; height: 100px; background-color: #eee; border: 1px solid #ccc; margin-bottom: 10px;"></div>
<button id="colorBtn">色をチェンジ</button>

<script>
    const box = document.getElementById('colorBox');
    const colorBtn = document.getElementById('colorBtn');

    colorBtn.addEventListener('click', () => {
        // 好きな色を指定する（ここでは直接指定）
        box.style.backgroundColor = '#3498db';
        
        // ボタン自体の色も変えてみる
        colorBtn.style.backgroundColor = '#e74c3c';
        colorBtn.style.color = 'white';
    });
</script>

ここでは style.backgroundColor というプロパティを利用しています。
CSSで指定する背景色の設定を、JavaScriptから直接上書きする命令です。

プログラムが実行されると、指定した要素のインラインスタイルが書き換わり、ユーザーの画面に色が反映されます。

実務においては、CSS側で特定のクラス（例えば .is-active など）を用意しておき、JavaScript側からは classList.toggle('is-active') のようにクラスを付け外しする手法もよく使われます。

これにより、デザインの管理がより効率的になります。

ボタンが押されたら「if文」で条件分岐させる

「ボタンが1回押されたとき」と「2回目以降」で挙動を変えたり、入力フォームの値によって処理を分けたりしたい場合は、if文をイベントの中に組み込みます。

if文を使った状態の切り替え（ON/OFF）

<p id="statusLabel">現在は：OFF</p>
<button id="toggleBtn">切り替え</button>

<script>
    let isOn = false; // 状態を記憶する変数
    const statusLabel = document.getElementById('statusLabel');
    const toggleBtn = document.getElementById('toggleBtn');

    toggleBtn.addEventListener('click', () => {
        // if文で現在の状態をチェックする
        if (isOn === false) {
            // OFFだったらONにする処理
            statusLabel.textContent = '現在は：ON';
            statusLabel.style.color = 'red';
            isOn = true; // 状態を更新
        } else {
            // ONだったらOFFに戻す処理
            statusLabel.textContent = '現在は：OFF';
            statusLabel.style.color = 'black';
            isOn = false; // 状態を更新
        }
    });
</script>

このプログラムの鍵は、イベントの外側に用意された isOn という「状態を記憶するための変数」です。

ボタンをクリックするたびに、まず if (isOn === false) という条件で今の状態を確認します。
もしOFFの状態であればON用の処理を実行し、最後に isOn = true と値を書き換えて「今はONですよ」と記憶させます。

次にクリックされたときは、else ブロックの方が実行されるため、再びOFFに戻ります。

このように、if文と状態管理の変数を組み合わせることで、1つのボタンに複数の役割を持たせることが可能になります。

複数のボタンを扱う：押されたボタンのID取得

「ボタンが10個あるけれど、どれが押されたか特定したい」という場面では、個別にイベントを書くのは大変です。

そんな時は、イベントが発生した対象から情報を抜き出すテクニックが役立ちます。

押されたボタンの情報を取得する

<button class="btn-group" id="button-A">ボタンA</button>
<button class="btn-group" id="button-B">ボタンB</button>
<button class="btn-group" id="button-C">ボタンC</button>

<script>
    // クラス名ですべてのボタンを取得
    const buttons = document.querySelectorAll('.btn-group');

    buttons.forEach(button => {
        button.addEventListener('click', (event) => {
            // event.target を使うと、実際に押された要素を取得できる
            const clickedId = event.target.id;
            console.log('クリックされたIDは: ' + clickedId);
            alert(clickedId + ' が押されましたね！');
        });
    });
</script>

querySelectorAll を使うと、同じクラス名を持つ要素をまとめて「リスト」として取得できます。
そのリストに対して forEach という繰り返し処理を行い、すべてのボタンに一斉にクリックイベントを登録しています。

ここで最も重要なのが、関数の引数にある (event) です。
これはイベントオブジェクトと呼ばれ、クリックに関する様々な情報が詰まっています。

event.target.id と記述することで、「今、実際にクリックされたのはどのボタンか」という情報を特定し、そのIDを取得しています。

この方法なら、ボタンが100個あっても数行のコードで管理できます。

特定のタイミングで「自動クリック」を発生させる

最後に応用として、人間の操作ではなくプログラムからボタンを「自動でクリックさせる」方法を紹介します。

特定の条件を満たしたときに、あたかもユーザーがボタンを押したかのように振る舞わせる機能です。

click()メソッドの使い方

// 3秒後に特定のボタンを自動でクリックさせる例
setTimeout(() => {
    const target = document.getElementById('autoClickBtn');
    if (target) {
        // プログラムからクリックイベントを発生させる
        target.click();
        console.log('自動クリックを実行しました');
    }
}, 3000);

JavaScriptには click() というそのものズバリのメソッドが用意されています。
これを呼び出すと、ブラウザはその要素に対してクリックイベントを強制的に発生させます。

例えば「入力が終わったら自動的に送信ボタンを押す」といった自動化処理や、特定の演出のトリガーとして非常に便利です。

ただし、セキュリティ上の理由から、ファイル選択や一部の特殊な操作は人間の直接的なクリックでないと動かない制限があるため、用途には注意が必要です。

JavaScriptのスキルを活かして年収を上げる方法

以上、JavaScriptのクリックイベントについて詳しく解説してきました。