.net column
.NET開発者のためのブログメディア

JavaScriptでのonclickの使い方とは?基本的な使い方から複数の関数の実行方法まで徹底解説!

 
JavaScriptでのonclickの使い方とは?基本的な使い方から複数の関数の実行方法まで徹底解説!
基本情報技術者試験の試験対策はこちら>>
SE
JavaScriptでのonclickの使い方について教えていただけますか。
PM
それでは、JavaScriptでのonclickの使い方について、基本的な使い方から複数の関数の実行方法についてご紹介しましょう。

JavaScriptでのonclickの使い方とは?


今回は、JavaScriptでのonclickの使い方について説明します。onclickを使うと、クリック時のイベントを実行できます。基本的な使い方から、引数の使い方や、動的にイベントを追加する方法について紹介します。また、onclickで複数の関数を実行する方法についても紹介します。

JavaScriptでのonclickの使い方に興味のある方はぜひご覧ください。

基本的な使い方

onclickの基本的な使い方を紹介します。HTMLに以下のようにonclickを指定します。

JavaScriptは以下のように記述します。

実行結果は以下のようになります。ボタンをクリックすると、alertが表示されます。

See the Pen
JavaScript_onclick1
by kskumd (@kskumd)
on CodePen.


onclickで指定した関数が実行されていることが分かります。

引数の使い方

onclickで引数(event/this)を指定する方法を紹介します。HTMLは以下のように記述します。

JavaScriptは以下のように記述します。

実行結果は以下のようになります。

See the Pen
JavaScript_onclick2
by kskumd (@kskumd)
on CodePen.

複数関数の実行

onclickで複数の関数を実行するには、;で区切ります。HTMLは以下のように記述します。

JavaScriptは以下のように記述します。

実行結果は以下のようになります。

See the Pen
JavaScript_onclick3
by kskumd (@kskumd)
on CodePen.


「;」区切りで指定した複数の関数が実行されていることが分かります。

イベントを動的に追加

イベントを動的に追加する方法を紹介します。HTMLは以下のように記述します。

JavaScriptは以下のように記述します。

実行結果は以下のようになります。「button1」ボタンをクリックする前に「button2」ボタンをクリックしても何も起きませんが、「button1」ボタンのクリック後に「button2」ボタンをクリックすると、設定したイベントが実行されます。

See the Pen
JavaScript_onclick4
by kskumd (@kskumd)
on CodePen.

動的に追加した要素にイベント追加

動的に追加した要素に対して、イベントを追加する方法を紹介します。HTMLは以下のように記述します。

JavaScriptは以下のように記述します。

実行結果は以下のようになります。「button add」ボタンをクリックすると、新しいボタンが追加されます。追加されたボタンをクリックすると、設定したイベントが実行されます。

See the Pen
JavaScript_onclick5
by kskumd (@kskumd)
on CodePen.


SE
JavaScriptでのonclickの使い方がよく分かりました。
PM
ご紹介したソースコードを参考に、ご自身でもソースコードを書いてみてください。

まとめ

いかがでしたでしょうか。JavaScriptでのonclickの使い方について説明しました。onclickを使うと、クリック時のイベントを実行できます。基本的な使い方から、引数の使い方や、動的にイベントを追加する方法について紹介しました。また、onclickでは、「;」で区切れば、複数関数を実行することもできます。

ぜひご自身でソースコードを書いて、理解を深めてください。


.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

また、直接のエントリーも受け付けております。

エントリー(応募フォーム)

Search

Popular

reccomended

Categories

Tags