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

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

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

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

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

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

では早速始めましょー！

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

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

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

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

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

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

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