JavaScriptでのonclickの使い方を初心者向けに解説

ユーザーがボタンをクリックしたり、フォームを送信したりするなど、様々なアクションに応じて特定の動作を実行する際に、JavaScriptのonclickイベントが活躍します。

この記事では、JavaScript初心者向けにonclickの使い方について詳しく解説していきます。

忍者CODEの学習は“実践型”！
だから結果を出せる！

●初めてIT業界にチャレンジする方
∟はじめての方でも安心して学習できるように、基礎知識から実践的な課題までプロへのロードマップが分かりやすいカリキュラムを採用。
●副業に有利なことを探されている方
∟未経験からでもスキルを習得できる“実践的カリキュラム”と、学習だけでなく受講後もプロのメンターがマンツーマンで徹底的に副業サポートまで行い、受講後は必ず案件をご紹介するプランの副業・案件”保証”プランもあります。
●業界最安級の受講費用で始めやすい
∟月額9,8000円から始められる忍者CODEのプログラミングスクールは業界でも最安級！それでも学習し放題、サポートは無期限・無制限と、プロのメンターとエンジニアを筆頭に、皆さんを徹底的にサポートします。

まずは自分の適性プラン診断から！

JavaScriptのonclickとは？
JavaScriptのonclickの使い方
クリックイベントの指定方法
まとめ
挫折することなくエンジニアを目指すなら
1. 独学？スクール？

JavaScriptのonclickとは？

JavaScriptのonclickは、要素がクリックされたときに特定のアクションを実行するためのイベントハンドラーです。

例えば、ボタンをクリックしたときにメッセージを表示する、画像を切り替える、フォームの内容を確認するなど、さまざまな動作をトリガーすることができます。onclickイベントは、HTML要素とJavaScriptの関数を結び付けることで動作します。

関連記事：「挫折せずにJavaScriptをマスターする方法」

全51問！Javascript無料問題集はコチラ▶

JavaScriptのonclickの使い方

onclickイベントの基本的な構文

onclickイベントは、HTML要素に直接記述することができます。以下は、基本的な構文の例です。

<button onclick="myFunction()">クリック</button>

上記の例では、ボタンがクリックされると、名前が”myFunction”で定義されたJavaScript関数が呼び出されます。

JavaScript関数の作成

onclickイベントを利用するためには、JavaScriptの関数を事前に作成する必要があります。関数は以下のようにして定義します。

function myFunction() {
　// ここに実行したいコードを書く
　alert("ボタンがクリックされました！");
}

上記の例では、”myFunction”という名前の関数が定義されています。この関数では、ボタンがクリックされたときにアラートメッセージが表示されます。

外部のJavaScriptファイルを使う

JavaScriptのコードをHTMLファイル内に直接書くのではなく、外部のJavaScriptファイルとして保存しておくこともできます。これにより、複数のHTMLファイルで同じJavaScriptコードを共有できるようになります。

外部ファイル（例：script.js）の例

function myFunction() {
　alert("ボタンがクリックされました！");
}

HTMLファイルでは、以下のように外部ファイルを読み込むことができます。

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

イベントオブジェクトを使用する

onclickイベントは、クリック時の情報を提供するイベントオブジェクトを使用することもできます。イベントオブジェクトを利用することで、マウスの座標やクリックされた要素などの情報を取得できます。

以下の例では、クリックした座標をアラートで表示する方法を示します。

<button onclick="showCoordinates(event)">クリック</button>

<script>
function showCoordinates(event) {
　const x = event.clientX;
　const y = event.clientY;
　alert(`クリックした座標：X=${x}、Y=${y}`);
}
</script>

これらの方法を覚えておけば、onclickイベントを使ったさまざまなインタラクティブな要素を作成することができます。

プログラミングスクールなら
忍者CODE

クリックイベントの指定方法

HTML属性による指定

最も基本的な方法の一つで、HTML要素の属性として直接onclickを記述します。

<button onclick="myFunction()">クリック</button>

この方法では、onclick属性にJavaScriptのコードを直接書くことで、クリックされたときに指定した関数が呼び出されます。しかし、コードがHTMLに直接埋め込まれるため、大規模なプロジェクトではメンテナンスが困難になる傾向があります。

onclickプロパティによる指定

HTML要素をJavaScriptで取得し、その要素のonclickプロパティに関数を代入する方法です。

<button id="myButton">クリック</button>

<script>
const button = document.getElementById('myButton');
button.onclick = function() {
　alert('ボタンがクリックされました！');
};
</script>

この方法でもクリックイベントを指定することができますが、複数のイベントを同時に設定することは難しく、また既存のイベントハンドラを上書きする可能性があるため、推奨される方法ではありません。

addEventListenerによる指定

addEventListenerメソッドは、HTML要素に対して複数のイベントハンドラを追加することができる方法です。

<button id="myButton">クリック</button>

<script>
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
　alert('ボタンがクリックされました！');
});
</script>

この方法は、複数のイベントハンドラを追加することができ、既存のイベントハンドラを上書きする心配もありません。したがって、大規模なプロジェクトではaddEventListenerを使用することが一般的です。

以上の3つの方法でクリックイベントを指定することができますが、addEventListenerが柔軟性と拡張性に優れているため、特に大規模なプロジェクトやモダンなJavaScriptアプリケーションでは推奨される方法となっています。
全51問！Javascript無料問題集はコチラ▶