デフォルトのアイキャッチ画像

要素をクリックすると処理が開始されるonclickというものを使ってみよう

投稿日: 2022年12月12日 2:02 AM

更新日: 2022年12月12日 2:02 AM

onclickとは??

onclickとは要素をクリックした際に起動する処理を指定するイベント属性です。
その為、HTMLドキュメント内の要素をクリックした際に起こるイベント処理になります。
なので!JavaScriptと組み合わせて使用することで複雑な処理を設定することができるんです!

試しに使ってみましょう!

See the Pen
Untitled
by kenta66448284 (@kenta66448284)
on CodePen.0


このクリック!して!を押すとconsoleにHello world!と表示されます。
なのでconsole.logのような簡単な処理だとhtmlだけで出来ちゃうんですね。

ですが、それだけだとやることが限られすぎちゃうので少し応用してみましょう。

onclick属性の値に関数を指定をしてみる。

See the Pen
Untitled
by kenta66448284 (@kenta66448284)
on CodePen.0

このようにonclickの値に関数の指定をするとその処理をやってくれるんです。
今回はalertされるように設定されています。
また、複数の関数を実行することもできますが、処理される順番はコード内で指定した順番になるので注意しましょう。

さらに!thisを指定することでクリックした要素についても取得することが可能です!

See the Pen
Untitled
by kenta66448284 (@kenta66448284)
on CodePen.0

今回の場合はクリックした要素のidを表示させています。
やっていることはaddEventListenerとそこまで変わりませんが活用する機会があるかもしれないので覚えておきましょう!