【HTML】onclick属性でクリック時の処理を指定する方法を解説
  • facebookページ
  • twitterページ
  • 2020.04.02

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

    onclick属性とは?

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

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

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

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

    【関連記事】

    ▶︎【JavaScript入門】JavaScriptで作れる「モノ」と基本構文を解説

    onclick属性の使い方・書き方

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

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

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

    ■表示結果

    onclick属性の使い方・書き方

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

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

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

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

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

    ■表示結果

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

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

    onclick属性で引数を渡す

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

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

    ■表示結果

    onclick属性で引数を渡す

     

    onclick属性の引数にthisを使う

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

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

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

    ■表示結果

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

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

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

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

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

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

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

    まとめ

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

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

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



    優良フリーランス案件多数掲載中!
    フリーランスエンジニアの案件をお探しなら
    ポテパンフリーランス

    この記事をシェア

    • Facebookシェア
    • Twitterシェア
    • Hatenaシェア
    • Lineシェア
    pickup









    ABOUT US

    ポテパンはエンジニアと企業の最適なマッチングを追求する企業です。

    READ MORE