JavaScriptでクリックしたときに処理を実行する方法

Webページをインタラクティブにする基本の一つが、クリックイベントの処理です。この記事では、JavaScriptを使ってHTMLの要素にクリックイベントを追加する手順を詳しく解説します。

要素を選択 DOMとの対話

最初のステップは、クリックイベントを追加したいHTML要素をJavaScriptで選択することです。これは、document.getElementById(), document.querySelector(), document.querySelectorAll() などのメソッドを使って行います。

<button id="myButton">クリックしてください</button>
var button = document.getElementById('myButton');

getElementByIdはHTML内の特定のIDを持つ要素を選択するためのものです。この例では、IDがmyButtonのボタン要素を選択しています。

イベントリスナーを追加 クリックに反応する

次に、選択した要素にaddEventListenerメソッドを使って、クリックイベントのリスナーを追加します。これにより、指定した要素がクリックされたときに特定の処理を行うように設定できます。

button.addEventListener('click', function() {
    // ここにクリック時の処理を書く
});

addEventListenerは第一引数にイベントの種類（この例では’click’）を、第二引数にイベントが発生したときに実行される関数（コールバック関数）を取ります。

コールバック関数を定義 クリック時のアクションを設定

最後のステップは、イベントが発生したときに実行される関数（コールバック関数）を定義することです。この関数内で、クリック時に行いたい具体的な処理を書きます。

button.addEventListener('click', function() {
    alert('クリックされました！');
});

この例では、ボタンがクリックされると、’クリックされました！’というアラートが表示されるシンプルな設定をしています。

実例

これらのステップを組み合わせれば、以下のようになります。

HTML

<button id="myButton">クリックしてください</button>

JavaScript

var button = document.getElementById('myButton');

button.addEventListener('click', function() {
    alert('クリックされました！');
});

これらのコードをHTMLファイルに追加し、ブラウザで開くと、「クリックしてください」と表示されるボタンが表示され、それをクリックすると「クリックされました！」というアラートが出る動作を確認できます。

サンプル

以下に、シンプルな「カウンター」アプリを作る例を示します。このカウンターアプリは、ユーザが「+」ボタンをクリックするとカウントが1増加し、「-」ボタンをクリックするとカウントが1減少するという機能を持ちます。

HTML

まず、カウンターの値を表示するための領域と、+ と – のボタンを設置します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>シンプルなカウンターアプリ</title>
</head>
<body>

<h1>カウント: <span id="counter">0</span></h1>
<button id="increment">+</button>
<button id="decrement">-</button>

<script src="script.js"></script>

</body>
</html>
  • カウンターの現在の値を表示する<span>要素を配置しています。ここでは、id=”counter”を指定して、JavaScriptからこの要素を選択できるようにしています。
  • +と-の操作を行うための2つのボタンを配置しています。これらにもそれぞれidを設定しています。

JavaScript (script.js)

次に、JavaScriptを使って、+ ボタンがクリックされたときにカウンターを1増やし、- ボタンがクリックされたときにカウンターを1減らす処理を書きます。

// カウンターの値を管理する変数
let count = 0;

// HTMLの要素を選択
const counterElement = document.getElementById('counter');
const incrementButton = document.getElementById('increment');
const decrementButton = document.getElementById('decrement');

// +ボタンのクリックイベント
incrementButton.addEventListener('click', function() {
    count++; // カウントを1増やす
    counterElement.textContent = count; // HTMLに新しいカウントの値を表示
});

// -ボタンのクリックイベント
decrementButton.addEventListener('click', function() {
    count--; // カウントを1減らす
    counterElement.textContent = count; // HTMLに新しいカウントの値を表示
});
  • カウンターの値を保存する変数countを定義し、初期値を0に設定しています。
  • document.getElementByIdを使ってHTMLの要素をJavaScriptで選択します。
  • +ボタンと-ボタンにそれぞれクリックイベントリスナーを追加して、クリックされたときの動作を定義しています。
  • ボタンがクリックされると、countの値が増減し、その新しい値がHTMLの<span id=”counter”>要素に反映されます。