tanatiyo 他の方のコードを見ていて、buttonタグにonclick属性が設定されていました。
勉強用メモです。気になったことを調べてメモしています。
【onclick属性とは】・・・ユーザーが要素をクリックしたときに起動する処理を指定するイベント属性。ボタンをクリックした際に、メッセージを表示したり別のページに遷移するといった処理が可能。JavaScriptと一緒に使うことで、より複雑な処理を実行できる。
・onclick属性で値はJavaScriptで作成した関数を呼び出す
・onclick属性で複数の関数を指定することも可能
・onclick属性では、関数に引数を渡すことも可能
・onclick属性で指定した関数の引数にthisを使うと、そのボタンの「戻り値」を取得可能
→例：buttonタグのid属性を戻り値として引数に挿入
→id属性だけでなく、様々な属性に対応しているので活用場所は多い。
こんなのもありました↓
・onclick属性で「location.href」を指定してリンクを飛ばす
→今までaタグで飛ばす方法しか知らなかったので驚いた。「onclick=”location.href=” “」とする。ぱっと見分かりにくいけど
href=の後はシングルクォーテーションを使っています。ダブルクォーテーションとシングルクォーテーションを使い分けないとエラーが
発生するようです。
それだけじゃなかった↓別タブでも開けるそうです↓
・onclick属性に「window.open」を指定することで、別タブで開くことが可能。openメソッド内では、第1引数に「リンク先URL」、
第2引数に「_blank」を設定することで、リンク先を別タブで開ける。
→例：onclick=”window.open(‘https://～’, ‘_blank’)”
【最後に注意点】
onclickに限ったことではないが、formタグ内のinputなどで使用しているnameやidと、onclick属性で呼び出す関数名が重複していると、関数が実行されない場合がある。
関数をHTML側からも指定できると知って驚いきました。まだまだ初心者だなと思ってしまいます。
特にonclick属性で呼び出す関数名とnameやidの重複がないかを気にしていこうと思います。
参考サイト：https://mteam.jp/column/10169/