onclickの便利な書き方に出会い、onclickの書き方にもいろいろあるんだなと思ったのでまとめてみます。
onclickとは
onclickはJavaScriptのイベントハンドラーの一つで、クリックされた時にメソッド（関数）を実行したりすることができます。よくあるのはボタンをクリックしたときの処理でしょうか。
いろんなonclickサンプルコード
さてonclick時に動くメソッドを書くにはいろいろな方法があります。それでは見ていきましょう。
（ボタンを使って書いていますが、inputタグやaタグなどにも使えます。）
html上のonclick属性に実行するメソッドを書く方法
一番よく見かける方法かと思います。
See the Pen onclickをhtml上に書く by Nakamoto (@programmerlife) on CodePen.
html上のタグにonclick属性を書き処理を実行しています。
<button onclick=”btn1()”>Button1</button>
またメソッドも1つだけでなく、2つ書くことも可能です。
<button onclick=”btn1();btn2()”>Button1</button>
メソッドをセミコロン「;」で区切ります。
htmlを書き加えることが可能であれば便利な書き方です。
onclick属性を追加して処理を書く１（getElementByIdなど）
html側にidやクラス名などがある場合にそれらを利用して要素を取得し、その要素がonclick(クリックされたら)処理を実行するという書き方になります。2番目によく見る書き方かと思います。
See the Pen rNWqxKR by Nakamoto (@programmerlife) on CodePen.
Javascriptで以下の処理を書いています。
document.getElementById(“btn”).onclick = function() {
alert(“クリックされました”);
};
上記はIDの場合ですが、クラスを指定する場合は以下のように書くこともできます。
document.getElementsByClassName(“test”)[0].onclick = function() {
alert(“クリックされました2”);
};
htmlに手を入れることができない場合によく使われています。
また次の章にも書きますが、querySelector()を使用しCSSセレクタで要素を取得することも可能です。個人的にはこちらが楽だと思います。
document.querySelector(“#btn”).onclick = function() {
alert(“クリックされました”);
};
onclick属性を追加して処理を書く２ （変数.onclick = method）
あまり見かけない書き方です。見かけないですが個人的にわかりやすくていいなと思っています。
See the Pen onclick属性を追加して処理を書く２ by Nakamoto (@programmerlife) on CodePen.
querySelectorで要素を取得します。
const btn = document.querySelector(‘#btn2’);
取得した要素のonclick属性にメソッドを代入しています。
btn.onclick = method1;
※ method1の()は省略
おまけ (addEventListener())
onclickではないですがaddEventListener()でクリックイベントを追加する方法もあります。
以下でまとめていますので、気になる方はご覧ください。
おわり
onclickの書き方もわかってないと、え、なんでこれ動いてるの？と混乱するので、１つしか書き方を知らないと危ないなと思いまとめてみました。
他にも素敵なコードを知っていたら教えていただければと思います。
