【HTML】onclick属性でクリック時の処理を指定する方法を解説

TOP
> 言語・スキル
> html
> 【HTML】onclick属性でクリック時の処理を指定する方法を解説

1 onclick属性とは？
2 onclick属性の使い方・書き方
3 まとめ

onclick属性とは？

onclick属性とは、ユーザが要素をクリックした際に起動する処理を指定するイベント属性です。

ボタンをクリックした際にメッセージボックスを表示させたり、別のテージに飛ばすといった処理が可能になります。

onclick属性とJavaScriptを一緒に使うことで、より複雑な処理を設定できます。

Javascripでできることや詳しい説明は、次の記事で解説していますのでよければ参考にしてください。

onclick属性の使い方・書き方

onclick属性の基本的な使い方を見ていきましょう。

サンプルではdivタグでボタンを作成し、onclick属性を指定します。

クリックするとメッセージボックスの表示イベントが発生します。

■HTML
<div id="text-button" onclick="clickDisplayAlert()">Click</div>

<script>
    function clickDisplayAlert() {
      alert("ボタンがクリックされました！");
    }
</script>

■CSS
#text-button {
  display: block;
  cursor: pointer;
  width: 160px;
  text-align: center;
  border: 1px solid #232323;
  padding: 10px;
}

■HTML

<div id="text-button" onclick="clickDisplayAlert()">Click</div>

function clickDisplayAlert() {

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

}

</script>

■CSS

#text-button {

display: block;

cursor: pointer;

width: 160px;

text-align: center;

border: 1px solid #232323;

padding: 10px;

}

■表示結果

onclick属性には関数の複数指定も可能

onclick属性は、複数の関数を指定して同時に実行することもできます。

記述方法は次の通りで、「;（セミコロン）」で関数を区切ります。

<タグ onclick="functionA(); functionB()"></div>

1	<タグ onclick="functionA(); functionB()"></div>

サンプルコードでボタンをクリックした際に、次の２つの処理が動くことを確認してみましょう。

メッセージボックスを表示
ボタンの「Click」が「Clicked!」に変化

■HTML
<div id="text-button" onclick="clickDisplayAlert()">Click</div>

<script>
    function clickDisplayAlert() {
      alert("ボタンがクリックされました！");
    }
    function clickTextRewrite() {
      document.getElementById("text-button").textContent="Clicked!";
    }
</script>

■CSS
#text-button {
  display: block;
  cursor: pointer;
  width: 160px;
  text-align: center;
  border: 1px solid #232323;
  padding: 10px;
}

■HTML

<div id="text-button" onclick="clickDisplayAlert()">Click</div>

function clickDisplayAlert() {

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

}

function clickTextRewrite() {

document.getElementById("text-button").textContent="Clicked!";

}

</script>

■CSS

#text-button {

display: block;

cursor: pointer;

width: 160px;

text-align: center;

border: 1px solid #232323;

padding: 10px;

}

■表示結果

onclick属性で引数を渡す

onclick属性で任意の引数を渡したい場合は、次のように記述します。

<タグ onclick="functionA(引数)"></div>

1	<タグ onclick="functionA(引数)"></div>

次のサンプルコードは引数に数字を設定し、値によって表示する文言を制御しています。

■HTML
<div id="text-button1" onclick="clickDisplayAlert(1)">Click1</div>
<div id="text-button2" onclick="clickDisplayAlert(2)">Click2</div>

<script>
    function clickDisplayAlert(num) {
      if (num === 1) {
        alert("1のボタンがクリックされました。");
      } else {
        alert("2のボタンがクリックされました。");
      } 
    }
</script>

■CSS
div {
  display: block;
  cursor: pointer;
  width: 160px;
  text-align: center;
  border: 1px solid #232323;
  padding: 10px;
}

■HTML

<div id="text-button1" onclick="clickDisplayAlert(1)">Click1</div>

<div id="text-button2" onclick="clickDisplayAlert(2)">Click2</div>

function clickDisplayAlert(num) {

if (num === 1) {

alert("1のボタンがクリックされました。");

} else {

alert("2のボタンがクリックされました。");

}

</script>

■CSS

div {

display: block;

cursor: pointer;

width: 160px;

text-align: center;

border: 1px solid #232323;

padding: 10px;

}

■表示結果

onclick属性の引数にthisを使う

onclick属性に指定した関数の引数に「this」を指定すると、戻り値の取得ができます。

thisは基本的にクリック対象の要素自身になります。

例えば、以下のサンプルコードでthisはボタン（div要素）になります。

■HTML
<div id="text-button" onclick="clickDisplayAlert(this.id)">Click</div>

<script>
    function clickDisplayAlert(id) {
      alert("このボタンのIDは" + id + "です。");
    }
</script>

■CSS
#text-button {
  display: block;
  cursor: pointer;
  width: 160px;
  text-align: center;
  border: 1px solid #232323;
  padding: 10px;
}

■HTML

<div id="text-button" onclick="clickDisplayAlert(this.id)">Click</div>

function clickDisplayAlert(id) {

alert("このボタンのIDは" + id + "です。");

}

</script>

■CSS

#text-button {

display: block;

cursor: pointer;

width: 160px;

text-align: center;

border: 1px solid #232323;

padding: 10px;

}

■表示結果

thisを用いると、要素を動的に変化させるなどの応用を効かせられます。

onclick属性にlocation.hrefを指定してリンクを飛ばす

onclick属性にlocation.hrefを指定すると、リンクを飛ばすことも可能です。

<タグ onclick="location.href='遷移先のURL'"></div>

1	<タグ onclick="location.href='遷移先のURL'"></div>

次のサンプルコードは、ボタンをクリックするとポテパンスタイルに飛ぶようになっています。

■HTML
<div id="text-button" onclick="location.href='https://style.potepan.com/'">Click</div>

■CSS
#text-button {
  display: block;
  cursor: pointer;
  width: 160px;
  text-align: center;
  border: 1px solid #232323;
  padding: 10px;
}

■HTML

<div id="text-button" onclick="location.href='https://style.potepan.com/'">Click</div>

■CSS

#text-button {

display: block;

cursor: pointer;

width: 160px;

text-align: center;

border: 1px solid #232323;

padding: 10px;

}

onclick属性にreturnを指定しイベントを中断させる

onclick属性に「retuen false」を指定すると、イベントを中断できます。

例えば、次のサンプルコードのように、画面遷移はせずにJavascriptだけを動作させられます。

■HTML
<a href="https://style.potepan.com/" onclick="clickDisplayAlert();return false">リンク</a>

<script>
    function clickDisplayAlert() {
      alert("このリンクは画面遷移しません！");
    }
</script>

■CSS
#text-button {
  display: block;
  cursor: pointer;
  width: 160px;
  text-align: center;
  border: 1px solid #232323;
  padding: 10px;
}

■HTML

function clickDisplayAlert() {

alert("このリンクは画面遷移しません！");

}

</script>

■CSS

#text-button {

display: block;

cursor: pointer;

width: 160px;

text-align: center;

border: 1px solid #232323;

padding: 10px;

}

まとめ

onclick属性の使い方について解説しました。

onclick属性は、要素を動的に変化させるためJavascript、jQueryの知識も必要になります。

ぜひこの記事と合わせて、Javascriptについても勉強してみてください。

「実際にプログラミングを使えるようになりたい」方におすすめ！

ポテパンキャンプは卒業生の多くがWebエンジニアとして活躍している実践型プログラミングスクールです。 450名以上が受講しており、その多くが上場企業、ベンチャー企業のWebエンジニアとして活躍しています。

基礎的な学習だけで満足せず、実際にプログラミングを覚えて実践で使えるレベルまで学習したいという方に人気です。プログラミングを学習し実践で使うには様々な要素が必要です。

それがマルっと詰まっているポテパンキャンプでプログラミングを学習してみませんか？

▶︎ プログラミングを学びたい方はこちら

卒業生の多くがWebエンジニアとして活躍

転職先企業の例

卒業生の多くがWeb企業で活躍しております。
実践的なカリキュラムをこなしているからこそ現場でも戦力となっております。
活躍する卒業生のインタビューもございますので是非御覧ください。

▶︎ 卒業生インタビューはこちら

経験豊富なエンジニア陣が直接指導

実践的なカリキュラムと経験豊富なエンジニアが直接指導にあたります。
有名企業のエンジニアも多数在籍し品質高いWebアプリケーションを作れるようサポートします。

満足度高くコスパの高いプログラミングスクール「ポテパンキャンプ」

運営する株式会社ポテパンは10,000人以上のエンジニアのキャリアサポートを行ってきております。
そのノウハウを活かして実践的なカリキュラムを随時アップデートしております。

代表の宮崎もプログラミングを覚えサイトを作りポテパンを創業しました。
本気でプログラミングを身につけたいという方にコスパ良く受講していただきたいと思っておりますので、
気になる方はぜひスクール詳細をのぞいてくださいませ。

ポテパンキャンプの詳細はこちら >>