【javascript】クリックで要素を追加・削除・操作する。

ドットインストールで勉強しても、実際に使わないと忘れちゃうよね！javascriptのイベントとか全然わかんないよね！

…ということで、改めてインプットしながらアウトプットすることにしました。CodePenがあれば、動的なイベントを発火させるのも楽チンですからね〜

関連記事

【javascript】DOMとイベントを勉強したから教えてみる。

ボタンクリックで要素を操作する

今回CodePenに追加したのは、「ボタンをクリックしたタイミングで要素を操作するイベント」です。

1. 追加
2. 削除
3. 書き換え

▲これをjavasctiptで操作します。javascriptの基本は別の記事でもご紹介しているので、よくわからない方はぜひチェックしてみてくださいっ！

https://fantastech.net/function

では早速始めましょー！

ボックスの色を変える

色の指定を書き換えるボタンを作り、そのボタンをクリックすると「ボックスの色が変わるイベント」が発火します。

See the Pen ボックスの色を変えるイベント by Chef ( @chef-aomori ) on CodePen .

テキストの追加・削除・書き換え

ボタンをクリックすると、ボックスの中にテキスト入りのp要素を追加したり、削除したり、書き換えたりすることができるイベントが発火します。

See the Pen テキスト要素を操作 by Chef ( @chef-aomori ) on CodePen .

ボタンクリックのイベントをjavascript側で設定する

先ほどのp要素を操作するイベントと結果はまったく同じですが、「イベントが発火するタイミングをjavasctipt側で設定」したサンプルです。

See the Pen テキスト要素を操作2 by Chef ( @chef-aomori ) on CodePen .

HTML側で「onclick属性」を指定するより、このようにイベントリスナーを使った方が実用的だと思います。多分。

まとめ

今回のイベントは基本中の基本なんですが、意識してコード書いてないと忘れちゃいますね。1からコード書くのは無理でした。

そしてやっぱり、イベントの「過程」と「結果」が見えるのはいいですね。早くCodePen使っとけば良かった…（涙）

「あれ？ボタンクリック時のイベントの設定どうやるんだっけ？」と悩みそうな方は、ぜひPocketに保存してください！笑