onclick属性の使い方｜HTMLでイベントを設定しJavaScriptと連携する方法

HTMLでボタンをクリックしたときに何かが動くようにしたい…そんなことってよくありますよね。

でも、「どうやって書けばいいの？」「onclickってよく聞くけど、使い方がわからない」と思うこともあると思います。

そこで今回は、「onclick on HTML」でイベントを設定する方法について、やさしくわかりやすく説明していきます。

onclickの仕組みや具体的な使い方がわかれば、クリックでメッセージを出したり、画像を切り替えたり、ページを移動させたりと、楽しくて便利なWebページが作れるようになりますので、ぜひ最後まで読んでみてください。

onclick属性とは？HTMLにおける基本的な使い方

onclick属性の役割とは

onclick属性は、HTMLのタグに指定して「その要素がクリックされたときに動く処理」を設定するためのものです。

主にボタンやリンクなどに使われますが、他の要素にも設定できます。

クリックという動作をきっかけにして、さまざまな命令を実行できるようになります。

例えば、ボタンを押したらメッセージを表示したり、画像を変えたりすることができます。

これにより、ユーザーが操作しやすく、動きのあるWebページを作れるようになります。

以下に、onclick属性の特徴をわかりやすくまとめます。

onclick属性はWeb制作の基本なので、使い方をしっかり覚えておくととても便利です。

HTML要素に直接書く方法

HTMLでは、onclick属性を使ってクリック時に実行したいJavaScriptのコードを直接タグに書くことができます。

これを「インラインで書く方法」と言います。

簡単な動作をさせたいときにとても便利です。

たとえば、次のようなコードがあります。

<button onclick="alert('こんにちは！')">クリックしてね</button>

このコードでは、ボタンをクリックすると「こんにちは！」というアラートが表示されます。

とてもシンプルにイベントを設定できるのが特徴です。

以下に、インラインでonclickを書く時のポイントをまとめます。

簡単な動きならこの方法で十分ですが、複雑な処理になる場合は別の方法を使った方が管理しやすくなります。

onclickで呼び出す関数の書き方

onclickで何かの動作をさせるとき、JavaScriptの関数を使うとコードがすっきりして便利です。

関数を使うと、同じ動きを何回も呼び出せるようになります。

以下のように書くと、関数を呼び出す形になります。


<script>
function sayHello() {
alert('こんにちは！');
}
</script>
<button onclick="sayHello()">あいさつする</button>


このようにすることで、HTMLの中がシンプルになり、JavaScriptの処理もわかりやすくなります。

関数を使ったonclickの書き方は、これからたくさん使うのでしっかりマスターしておきましょう。

シンプルなボタンの例

HTMLでonclickを使ってボタンを作ると、クリックするだけで簡単な動作を行うようにできます。

まずはシンプルな例を紹介します。

<button onclick="alert('ボタンが押されました！')">押してみよう</button>

このように書くと、ボタンを押すだけでアラートが表示されます。

とても簡単です。

以下のような例もあります。

このように、onclickを使えばいろいろなことができます。

まずは基本の書き方を覚えることが大切です。

他のイベント属性との違い

onclickのようなイベント属性は他にもあります。

それぞれのイベントは、起こるタイミングや使い方が少しずつ違います。

以下に代表的なイベント属性をまとめます。

これらとonclickを組み合わせることで、もっと便利で楽しいページを作れるようになります。

それぞれの特長を知っておくと、作れるものの幅が広がります。

onclick属性を使用する場面

onclick属性は、実際のWebページでもいろいろな場面で使われています。

操作に応じて動きをつけたいときにとても役立ちます。

次のような場面でよく使われます。

このように、onclickはユーザーの操作をきっかけにして、ページに動きを加えるときに大活躍します。

使い方を覚えておくと、とても便利です。

記述時に気をつけるポイント

onclickを使うときには、いくつか気をつけたいことがあります。

間違えると動かなくなってしまうので注意が必要です。

以下のようなポイントを確認しながら書くと安心です。

正しく記述すれば、onclickはとても使いやすいイベント属性です。

基本を守って、エラーが出ないように注意しましょう。

JavaScriptと連携したonclickの実装方法

関数を外部スクリプトで定義する方法

onclickを使うとき、JavaScriptのコードをHTMLの中に直接書く方法もありますが、大きなWebページではコードが長くなりがちです。

そんなときは、JavaScriptを外部ファイルに分けて記述する方法が便利です。

この方法なら、HTMLが見やすくなり、JavaScriptの再利用や管理もしやすくなります。

たとえば、次のようにHTMLファイルではスクリプトファイルを読み込むだけにしておきます。

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

そして、script.jsという外部ファイルの中に次のような関数を記述します。


function showMessage() {
alert('これは外部スクリプトからのメッセージです');
}


あとは、HTMLのボタンタグなどで次のように呼び出せばOKです。

<button onclick="showMessage()">メッセージを表示</button>

この方法を使うメリットを以下にまとめます。

外部ファイルに関数を分けることで、onclickの使い方がより効率的になります。

イベントリスナーとの違いと使い分け

onclick属性の他にも、JavaScriptには「イベントリスナー」という方法でクリックイベントを設定する方法があります。

onclickはHTML内に直接書くのに対し、イベントリスナーはJavaScriptの中で要素を指定して処理を追加する方法です。

以下はイベントリスナーの使い方です。


document.getElementById("btn").addEventListener("click", function() {
alert("イベントリスナーで反応しました");
});


この書き方を使うメリットはたくさんあります。

以下にまとめます。

onclickとイベントリスナーはどちらも便利ですが、場面に応じて使い分けることが大切です。

引数を渡すonclickの書き方

onclickで関数を呼ぶとき、ただ動かすだけではなく、「値」を渡すこともできます。

これを引数と言います。

引数を使うと、ボタンごとに違う動きをさせることができるのでとても便利です。

たとえば、次のように書きます。


function greet(name) {
alert(name + "さん、こんにちは！");
}
<button onclick="greet('たろう')">たろうを呼ぶ</button>
<button onclick="greet('はなこ')">はなこを呼ぶ</button>


このように、ボタンを押すとそれぞれの名前が表示されるようになります。

引数を使うときのポイントを以下にまとめます。

引数をうまく使うと、onclickの使い方がぐっと広がります。

複数の処理をonclickで実行する方法

onclickの中では、1つの処理だけでなく、複数の動作を同時に行うことができます。

たとえば、ボタンを押したらメッセージを表示して、色も変えるというようなことが可能です。

そのためには、処理と処理の間をセミコロン（;）でつなげて書きます。


<button onclick="alert('押されたよ'); this.style.background='yellow'">試してみよう</button>


このコードでは、ボタンが押されるとアラートが出て、ボタンの背景色が黄色に変わります。

以下に複数処理のポイントをまとめます。

複数の処理をスマートにまとめることで、より便利な動きを作ることができます。

return falseの使いどころ

onclickの中で「return false;」と書くことがあります。

これはリンクやフォームのような要素で、「本来の動作を止めたいとき」に使います。

たとえば、リンクをクリックしてもページを移動させずに、別の処理だけを実行したい場合などです。


<a href="https://example.com" onclick="alert('移動しません'); return false;">リンク</a>


このコードでは、リンクをクリックしても実際には移動せず、アラートだけが出ます。

return falseの使い方で覚えておくべきことを以下にまとめます。

return falseを使うときは、動作を止めたい目的があるかをよく考えることが大切です。

HTML内での可読性を高める工夫

onclickを使ったコードは、どんどん複雑になっていくことがあります。

そんなとき、HTMLの中がごちゃごちゃにならないようにする工夫が必要です。

コードが読みやすいと、間違いも見つけやすくなります。

以下の工夫を取り入れると、HTMLがすっきりして管理しやすくなります。

読みやすさを意識するだけで、コードの品質がぐっと良くなります。

作ったあとに見直すときにもとても便利です。

実行タイミングに関する注意点

onclickイベントは「クリックされたとき」に発動しますが、実行されるタイミングが少しでもずれると、うまく動かないことがあります。

特にJavaScriptのファイルがまだ読み込まれていないと、関数が見つからずエラーになります。

そのため、次のような点に注意が必要です。

正しくタイミングを合わせることで、onclickの処理が確実に動作するようになります。

とても大事なポイントなのでしっかり確認しましょう。

よくあるエラーとonclickが効かない時の対処法

onclickが無反応になる主な原因

HTMLでonclickを使ったのに、ボタンやリンクをクリックしても何も起きない…そんな時にはいくつかの原因が考えられます。

エラーが出ていなくても、onclickが反応しないことはよくあります。

まずは次のような点をチェックしてみましょう。

これらを確認するだけでも、多くの「動かない」トラブルを防ぐことができます。

onclickが効かない場合は、まず基本的な部分をしっかり見直すのが大切です。

JavaScriptの記述ミスをチェックする

onclickで動かない原因の中で、とても多いのが「JavaScriptのミス」です。

記号の抜けやスペル間違い、小さなミスでもスクリプト全体が動かなくなることがあります。

正しいコードでも、ちょっとした記述ミスでonclickが反応しなくなってしまいます。

次のようなミスがよくありますので注意しましょう。

コードが長くなってくると、どこにミスがあるのか見つけづらくなります。

そんな時は、一行ずつゆっくり見直してみることが大切です。

要素の取得に失敗しているケース

onclickの中でJavaScriptの関数を使って要素を操作しようとしても、対象の要素が正しく取得できていないと動作しません。

IDやクラス名の指定ミス、要素がまだ存在していないなど、細かいところに原因があることが多いです。

以下に要素取得失敗の主な理由をまとめます。

このようなときは、console.logで確認しながらコードを見直すと、何が起きているのかが分かりやすくなります。

イベントのバブリングと競合の影響

onclickが動かない原因には、イベントのバブリング（伝播）や他のスクリプトとの競合もあります。

特に複数のスクリプトを使っているページでは、onclickの処理がうまく動かないことがあります。

バブリングとは、ある要素でイベントが発生したときに、それが親の要素にも伝わる動きのことです。

この影響で思った通りに処理されないことがあります。

以下のようなことに注意する必要があります。

このようなケースでは、イベントの流れをきちんと確認することが大切です。

ブラウザの開発者ツールでのデバッグ方法

onclickのエラーを調べるときに役立つのが、ブラウザの開発者ツールです。

これを使えば、JavaScriptのエラー内容を確認したり、onclickイベントがちゃんと動いているかを調べたりすることができます。

開発者ツールの使い方はとても簡単です。

開発者ツールを使いこなせば、原因がどこにあるのか一目でわかるようになります。

初心者でも少しずつ慣れていくことで、とても強力な味方になります。

インライン記述とスクリプトの競合対策

HTMLの中に直接onclickを書いていると、外部スクリプトや他のライブラリとぶつかって、思った通りに動かなくなることがあります。

このようなときには、onclickをJavaScriptの中で設定するように書き換えると解決しやすくなります。

たとえば、次のように書く方法があります。


document.getElementById("myBtn").onclick = function() {
alert("これで安心");
}


または、イベントリスナーを使う方法もおすすめです。

競合を防ぐために注意すべきことをまとめます。

onclickを安全に使うためには、スクリプトの書き方や管理方法にも気をつけることが大事です。

スマホ・タブレットで動かない原因

PCではonclickがちゃんと動いていたのに、スマホやタブレットでは動かない…そんなこともあります。

原因はデバイスの違いによる操作方法や、タッチイベントとの関係にあります。

特にスマホでは「クリック」ではなく「タップ」という別の動作になるため、うまく反応しないことがあります。

以下のような原因が考えられます。

スマホやタブレットにも対応させたい場合は、touchstartやpointerdownなどのイベントも組み合わせて使うと効果的です。

デバイスごとの違いを理解して、安心して使えるonclickイベントを作りましょう。

実践！onclickを使った具体的なサンプル集

テキストの表示・非表示を切り替える

onclickを使うと、テキストをクリックで「出したり隠したり」する仕組みが作れます。

この動きは「トグル（切り替え）」と呼ばれ、FAQや注意書きの表示によく使われます。

ボタンを押すたびにテキストが表示されたり、消えたりするので、とても便利です。

以下にシンプルなサンプルコードを紹介します。


<button onclick="toggleText()">説明を表示/非表示</button>
<div id="textBox" style="display:none">これは説明文です。

</div>
<script>
function toggleText() {
let box = document.getElementById(“textBox”);
box.style.display = (box.style.display === “none”) ? “block” : “none”;
}
</script>

この動きを作るときのポイントをまとめます。

この方法を覚えておくと、どんなWebページでもよく使える機能を作れます。

フォーム送信前に確認アラートを出す

フォームを送信するとき、「本当に送信していいですか？」と確認するアラートを出すことで、間違いを防げます。

onclickイベントでこのアラートを追加することで、ユーザーの安心につながります。

以下に実際のコード例を紹介します。


<form onsubmit="return confirmSend()">
名前：<input type="text">
<input type="submit" value="送信">
</form>
<script>
function confirmSend() {
return confirm("送信してもよろしいですか？");
}
</script>


このように、送信ボタンが押される前に確認のダイアログが出ます。

この動作を設定するポイントを以下にまとめます。

この仕組みは、送信ミスを防ぎたい場面でとても効果的です。

画像をクリックして拡大表示する

画像をクリックして拡大できるようにすると、ユーザーにとって見やすくなります。

onclickを使えば、画像を切り替えるだけで簡単に拡大表示が実現できます。

以下にサンプルコードを示します。


<img id="myImg" src="small.jpg" onclick="zoomImage()" style="width:100px;cursor:pointer">
<script>
function zoomImage() {
let img = document.getElementById("myImg");
img.style.width = (img.style.width === "100px") ? "300px" : "100px";
}
</script>


画像を切り替えるときのポイントを見てみましょう。

この仕組みは商品画像や写真ギャラリーでよく使われます。

ボタンでページ遷移する

onclickを使って、ボタンを押すと他のページへ移動させることもできます。

リンクを使わなくても、クリックでページを切り替える動きができるので、操作感のよいサイトになります。

以下にその書き方を紹介します。


<button onclick="goToPage()">次のページへ</button>
<script>
function goToPage() {
window.location.href = "nextpage.html";
}
</script>


ページ移動の動作を作るときのポイントをまとめます。

この方法は、リンクよりも柔軟に動きをコントロールしたいときにとても便利です。

リスト項目を動的に追加する

onclickを使うと、クリックしたときにリストをどんどん増やすような仕組みも作れます。

これはToDoリストや買い物リストなど、ユーザーが自由に項目を増やせる機能に役立ちます。

以下のようなコードを使います。


<ul id="myList"></ul>
<button onclick="addItem()">リストを追加</button>
<script>
function addItem() {
let li = document.createElement("li");
li.textContent = "新しい項目";
document.getElementById("myList").appendChild(li);
}
</script>


このような機能を作るときのポイントは以下の通りです。

この動きは、入力フォームやチェックリストのようなUIでとても重宝されます。

カウンター機能の実装例

クリックするたびに数字を増やす「カウンター」は、onclickイベントの学習にもぴったりな例です。

ゲームやいいねボタンなどにも応用できます。

JavaScriptの変数の扱いも同時に学べるのでおすすめです。

以下のコードを見てみましょう。


<span id="count">0</span>
<button onclick="countUp()">カウントアップ</button>
<script>
let count = 0;
function countUp() {
count++;
document.getElementById("count").textContent = count;
}
</script>


カウンターを作るときの注意点を以下にまとめます。

数字を動かすことで、ユーザーの反応をその場で見せることができます。

簡易モーダルウィンドウを開く

モーダルウィンドウとは、画面の上に重ねて表示される小さなウィンドウのことです。

onclickで簡単に表示・非表示の切り替えができ、ちょっとした説明や画像表示などにとても便利です。

以下にシンプルなコードを紹介します。


<button onclick="openModal()">モーダルを開く</button>
<div id="modal" style="display:none; position:fixed; top:20%; left:30%; background:#fff; padding:20px; border:1px solid #000;">
これはモーダルです。

<br>
<button onclick=”closeModal()”>閉じる</button>
</div>
<script>
function openModal() {
document.getElementById(“modal”).style.display = “block”;
}
function closeModal() {
document.getElementById(“modal”).style.display = “none”;
}
</script>

この機能を作るときに意識するポイントを紹介します。

モーダルは情報を目立たせたいときにとても役立ちます。

シンプルな仕組みでも十分な機能が作れます。

まとめ

この記事では、HTMLのonclick属性を使ってイベントを設定する方法について、基本から応用までわかりやすく解説してきました。

最後に、特に大切なポイントをまとめておきます。

onclickの使い方をしっかり覚えて、あなたのWebページをもっと楽しく、もっと使いやすくしてみましょう！